javascript - jQuery 向动画队列添加函数

问题是，当我尝试制作多个动画时，它们都会同时发生。
有什么方法可以让动画一个接一个地运行而不使用回调？

这是我想做的:

$('#a1').click(function() { $('#div1').hide(3000); });
$('#a2').click(function() { $('#div2').hide(3000); });
$('#a3').click(function() { $('#div3').show(3000); });

如果您点击 #a1 然后点击 #a2 然后在第一个动画完成之前点击 #a3 那么它不应该开始马上，而是等到动画队列为空后再开始下一个。

Take this demo for example

我希望能够依次点击 a1 然后 a2 然后 a3 并且首先让它完全隐藏第一个 div，然后完全显示第二个，然后显示第三个。

我的示例过于简单，虽然这可以通过回调来完成，但我的实际问题不能，所以回调不是一个选项。

从本质上讲，如果您同时点击所有三个动画应该会在 9 秒内完成。

This DEMO should alert (`'took around 9 seconds to complete')`

最佳答案

使用.queue()在一个普通的 jQuery 对象上:

var q = $({}); // this could also be a common parent, e.g. $('body')
$('#a1').click(function() {
    q.queue(function(next) {
        $('#div1').hide(3000, next);
    });
    return false;
});
$('#a2').click(function() {
    q.queue(function(next) {
        $('#div2').hide(3000, next);
    });
    return false;
});
$('#a3').click(function() {
    q.queue(function(next) {
        $('#div3').show(3000, next);
    });
    return false;
});

Demo

关于javascript - jQuery 向动画队列添加函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10872749/