jQuery将函数添加到动画队列中

Question

问题在于，当我尝试做多个动画时，它们都会在同一时间发生 有没有办法让动画一个接一个地不使用回调？

这就是我想要做的事情：

$('#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，然后完全隐藏第二个div，然后显示第三

我的例子过于简单，虽然这可以通过回调完成，但我真正的问题不能让回调不是一个选项。

从本质上讲，如果你点击全部三个，动画应该在9秒内完成。

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

Answer 1

在常见的jQuery对象上使用.queue()：

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

Answer 2

使用.promise()来回避show和hide上的回调：

  

.promise（）方法返回一个动态生成的Promise，一旦绑定到已排队或未排队的集合的某个类型的所有操作都已结束，它就会被解析。

     

默认情况下，输入为“fx”，表示当所选元素的所有动画都已完成时，已解析返回的Promise

使用.queue()限制每个承诺解决的动画数量（另请参阅jsFiddle）：

var promises = $({});

$('#a1').click(function() {
    promises.queue(function(next) {
        $('div').promise().done(function() {
            $('#div1').hide(3000);
            next();
        });
    });
    return false;
});
$('#a2').click(function() {
    promises.queue(function(next) {
        $('div').promise().done(function() {
            $('#div2').hide(3000);
            next();
        });
    });
    return false;
});
$('#a3').click(function() {
    promises.queue(function(next) {
        $('div').promise().done(function() {
            $('#div3').show(3000);
            next();
        });
    });
    return false;
});

Answer 3

尝试使用队列创建一些数组，并检查其中是否存在某些内容，作为动画的回调，如果存在则再次运行。我和你的例子玩了一点。

检查出来：

http://jsfiddle.net/acrashik/nqh6x/6/

var queue = {
    q: [],
    run: function(elem, type, time, recall) {
        if (queue.isRunning && !recall) {
            console.log('pushed: ' + elem + type + time);            
            queue.q.push({elem:elem, type:type, time:time});
        } else {
            console.log('running:' + elem);
            queue.isRunning = true;
            if (type=='hide') {
                $(elem).hide(time, function(){
                    queue.recall();
                })
            } else {
                $(elem).show(time, function(){
                    queue.recall();
                })             
            }
        }                    
    },
    recall: function(){
        console.log(queue.q.length);                    
        if (queue.q.length > 0) {
            queue.run(queue.q[0].elem, queue.q[0].type, queue.q[0].time, true);
            queue.q = queue.q.splice(1,queue.q.length);
        } else {
            queue.isRunning = false;
            queue.q = [];
        }
    },            
    isRunning: false
}
$('#a1').click(function() { queue.run('#div1','hide',2200) });
$('#a2').click(function() { queue.run('#div2','hide',2200) });
$('#a3').click(function() { queue.run('#div3','show',2200) });

Answer 4

我会使用animate()函数，因为它附带了一个完整的函数，当动画完成http://api.jquery.com/animate/时会调用该函数。

所以要使用jQuery doc示例：

$('#clickme').click(function() {
  $('#book').animate({
   opacity: 0.25,
   left: '+=50',
   height: 'toggle'
}, 5000, function() {
// Animation complete this is where you call the next animation...
  });
});

function another_animation () {
  $('xyz').animate({
   opacity: 0.25,
   left: '+=50',
}5000, function() {
// Animation complete this is where you call the next animation

我认为这是最干净的方式......

Answer 5

你可以这样做：

(function(){
    var col=(function(){
        var i=1;
        return function(n){alert("you clicked link nr " + n + ", total clicks: "+i++)};
    })();
    $('#a1').click(function(){col(1)});
    $('#a2').click(function(){col(2)});
    $('#a3').click(function(){col(3)});
})();

我不是为你写了整个代码，但这应该会让你对如何做到这一点有所了解。 此外，没有任何变量或函数可以从全局范围或任何其他范围访问。

Answer 6

在动画前添加stop（）：

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

Answer 7

使用它 $(element).promise().done(function () {...})

在你的情况下

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

仅当所选元素上的上一个动画完成时，才会执行下一个动画。