jquery - 使用 jquery 子元素的顺序动画

Question

我将一个 html 字符串 (var data['return']) 附加到具有以下形式的 ul 元素 $('#sidebar_append')

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

我想为所有 child 创建一个连续的淡入动画。我已经尝试过以下方法，但它不会淡入

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

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

Answer 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 .