FadeOut Ajax Response FadeIn

FadeOut Ajax Response FadeIn

As the subject says, I want to fade out my current content, add my ajax response content and fadeIn my content.

This is what I have 

  1. $("#page-content").fadeOut(2000).html(result).fadeIn(2000);

What's happening is my AJAX response is showing then it's fading out and in.

Here is my full code

  2. $(document).on("click","#news-btn",function(e){
  3.               $.ajax({url: "getContent/news.php", success: function(result){
  4.             $("#page-content").fadeOut(2000).html(result).fadeIn(2000);
  5.       }});
  6.       });