带jquery孩子的连续动画

时间:2012-08-23 10:34:44

标签: jquery animation

我将html字符串(var data ['return'])附加到ul元素$('#sidebar_append'),其格式如下

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

我想为所有孩子创建一个连续的淡入淡出动画。我尝试了以下内容,但它不会淡出

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

这很奇怪,因为当我执行 console.log($(this))时,我实际上在firebug中获得li但没有fadeIn

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

试试这个

(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

答案 2 :(得分:0)

与该插件jquery-timing一起,整个事情变得更短:

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