Question

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

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

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是您正在创建的队列的名称。我希望它能够涵盖它。

jQuery：如何在动画堆栈中使用deferreds

2 个答案: