JQuery fadeIn() fires twice

Question

I'm loading some html content via ajax on click event. My code is-

$.ajax({
  url: somelink,
  async: true,
  beforeSend: function () {
      $("#myDiv").fadeOut("slow");
      $("#myDiv").empty();
  },
  success: function (data) {
      $('#myDiv').html(data);
      $("#myDiv").fadeIn("slow");
  },
  error: function (request, status, error) {
     alert("Error");
  },
  complete: function () {
  }
 });

Problem is #myDiv is fading in twice. What is the problem here?

Answer 1

Seems to be related to the html() call that actually shows the content really fast, then hides it again before the fadeIn kicks in. If the content is not updated fadeIn/out behaves as expected.

You can use a .hide() in the success function:

beforeSend: function () {
    $("#myDiv").fadeOut("slow").empty();
},
success: function (data) {
    $('#myDiv').hide().html("test!").fadeIn("slow");
},