CODEWITHSUNDEEP
jqueryanimation
toxicate20
toxicate20

Reputation: 5410

Sequential animation with jquery children

I am appending a html string (var data['return']) to a ul element $('#sidebar_append') which has the following form

<li>item one</li>
<li>item two</li>
<li>item three</li>

I want to create a sequential fadeIn animation for all the children. I've tried the following, but it would not fadeIn

$('#sidebar_append')
    .hide()
    .append(data['return'])
    .children()
    .each(function() {
          $(this).fadeIn('fast')
    });

It's weird as when I do a console.log($(this)) I actually get the li in firebug but no fadeIn.

Upvotes: 2

Views: 215

Answers (3)

toxicate20
toxicate20

Reputation: 5410

Nevermind, it's pretty simple, I forgot that $('#sidebar_append') is still hidden. You also need a delay to create a sequence animation:

$('#sidebar_append')
  .append(data['return'])
  .children().hide()
  .each(function(index) {
      $(this).delay(150*index).fadeIn('slow')
  });

Upvotes: 1

peter
peter

Reputation: 185

Together with that plugin jquery-timing the whole thing gets much shorter:

$('#sidebar_append').append(data['return'])
    .children().hide().each($).fadeIn('fast',$);

voilà

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

Try this

(function(){
    $('#sidebar_append').append(data['return']).children().hide();
    var index=0;
    function show()
    {
        $('#sidebar_append li').eq(index).fadeIn('slow', function(){
            index+=1;
            if($('#sidebar_append li').eq(index).length) show();
            else return false;
        });
    }
    show();
})();

DEMO.

Upvotes: 1

Related Questions