jQuery：如何在动画堆栈中使用延迟答案

【问题标题】：jQuery: How to use deferreds with animation stackjQuery：如何在动画堆栈中使用延迟
【发布时间】：2012-04-21 10:42:46
【问题描述】：

我无法确定如何在动画序列完成后使用 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;
});

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

【问题讨论】：

标签： jquery jquery-deferred

【解决方案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>

【讨论】：

【解决方案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 是您正在创建的队列的名称。我希望这几乎涵盖了它。

【讨论】：