Question

I have a problem with an animation in jQuery using ajax.

On the click of an button (actually an tag), I call a ajax method, and have the following written inside the success parameter:

success: function(msg) {
  $('.ContentsMainRight').children().fadeOut(500, function() {
    $('.ContentsMainRight').html(msg.d);
    $('.ContentsMainRight').children().fadeIn(1000);
  });
},

This have the following result.

The contents of a div fade out over 500ms as it’s supposed to. Then the html contents of the div are swapped, but then the last part did not work as I hoped. The html returned by the ajax method include some text inside a

tag, and a image inside a tag. The result is that the text is automatically displayed instantly with no fadein, but the img that is put fades in over 1 second. Why is the text and image treated differently?

-Daemon

Answer 1

Most likely, .children() references elements, not text nodes. This means the styles that are applied to them won’t persist when the text changes, meaning the text will not have display:none or visibility:hidden (whichever is applied).

Why don’t you just fade out the .ContentsMainRight div?

success: function(msg) {
  $('.ContentsMainRight').fadeOut(500, function() {
    $('.ContentsMainRight').html(msg.d);
    $('.ContentsMainRight').fadeIn(1000);
  });
},