jquery - jQuery：如何在动画堆栈中使用延迟

Question

在动画序列完成后，我无法确定如何使用 Deferreds 运行回调。如果我只为一件事制作动画，我知道我可以.promise()在动画/淡入淡出/幻灯片的末尾使用，但是在尝试为多个事物制作动画时，我不确定如何使用它。

到目前为止，我的代码如下：

var delayTime = 0;
$stack = $('li'); // returns five list items.
$stack.each(function(index, element) {
    $(element).delay(delayTime).animate({ opacity: 0.3 }, 500, function() {
        $(element).animate({ opacity: 1 }, 500);
    });
    delayTime += 1250;
});

在所有元素相继淡入淡出之后，我想在最后运行一个回调。

Answer 1

<script src="js/jquery/jquery-1.7.1.js"></script>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    $(function() {
        var delayTime = 0;
        var $stack = $("li");
        $stack.each(function(index, element) {
            $(element)
                .delay(delayTime)
                .animate({ opacity: .3 }, 500)
                .animate({ opacity: 1 }, 500);
            delayTime += 1250;
        }).promise().done(function() {
            $stack.parent().append("<li>Hello!</li>");
        });
    });
</script>

Answer 2

这是设置自定义函数队列的默认 jQuery 方式：

articleDiv.queue("createPages",function(next){articleDiv.html(loader);next()});//step 1
articleDiv.delay(800,"createPages");//add delay after step 1
articleDiv.queue("createPages",function(next){articleDiv.html(content);next()});//step 2
articleDiv.delay(800,"createPages");//add delay after  step2
articleDiv.dequeue("createPages");//process the entire queue

一些基本规则：上面示例中的 articleDiv 是 var articleDiv=$('#the_container_of_the_animation') 并且 createPages 是您正在创建的队列的名称。我希望这几乎涵盖了它。