连续动画与jQuery孩子

Question

我追加一个HTML字符串（VAR数据[“回报”]），其具有以下形式

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

我想创建一个UI元素$（“＃sidebar_append”）为所有的孩子连续的淡入淡出动画。我试过以下，但它不会淡入

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

这很奇怪，当我做了的console.log（$（本））我实际得到的萤火的li但没有fadeIn。

Answer 1

没关系，这很简单，我忘了$('#sidebar_append')仍然隐藏。您还需要延迟创建序列动画：

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

Answer 2

试试这个

(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。

Answer 3

与插件 jquery-timing整个事情

聚在一起更短：

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

瞧