Problem with jQuery animation

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

Andy E · Accepted Answer · 2010-04-02 22:26:37Z

2

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);
  });
},

answered Apr 2, 2010 at 22:26

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Øyvind Bråthen Over a year ago

Hi Andy. It seems that the problem is as you say. Even if I remove the fadeIn call completly, the text i input still gets visible. The reason I don't fade out the entire div, is that it would mean that the background image for the div also get's faded out, and that is not what I want. Would it help if I put a second div inside the div with the background, and then fade that div out, and replace the contents inside that div instead of the actual elements inside the div?

Øyvind Bråthen Over a year ago

I tried putting a new div inside the ContentsMainRight div, and that worked like a charm. Thanks for your insight on this issue.

cletus · Accepted Answer · 2010-04-02 22:31:04Z

1

Try:

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

Basically the problem is that you hide the children and then replace the children with your html() call. The replaced content isn't hidden so it's instantly visible, which is what you're seeing.

Another issue is that if there are multiple children you will be replacing all the children on each child's callback. When you call fadeOut() on multiple elements, it's called separately for each element.

To give you an example of what I mean assume:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Compare:

$("ul").fadeOut(500, function() {
  alert("replacing");
  $(this).html("<li>four</li><li>five</li><li>six</li>").fadeIn(500);
});

with:

$("ul").children().fadeOut(500, function() {
  alert("replacing"); // this will be called three times
  $(this).html("<li>four</li><li>five</li><li>six</li>").children().fadeIn(500);
});

or to make it even more clear:

$("ul").children().fadeOut(500, function() {
  alert("replacing"); // this will be called three times
  $(this).append("<li>four</li><li>five</li><li>six</li>").children().fadeIn(500);
});

edited Apr 2, 2010 at 22:31

answered Apr 2, 2010 at 22:25

cletus

627k169 gold badges922 silver badges945 bronze badges

2 Comments

Øyvind Bråthen Over a year ago

Hi Cletus. I only have one element with the ContentsMainRight class, so the replace of several elements in not an issue, but that the replaced content is visible is the problem. Thanks for letting me know the (obvious) reason.

Øyvind Bråthen Over a year ago

Your example is very good. I fixed this now putting another div inside my ContentsMainRight div, and then fading that div in and out without the call to children. I'm quite new to jQuery so I appreciate the help :)

Collectives™ on Stack Overflow

Problem with jQuery animation

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related