jQuery向动画队列添加函数

jQuery adding functions to the animation queue

本文关键字：添加 函数 队列 动画 jQuery      更新时间：2023-09-26

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

以下是我想做的：

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

如果单击#a1然后单击#a2然后在第一个动画完成之前#a3，则它不应立即启动，而是等到动画队列为空，然后开始下一个动画。

以这个演示为例

我希望能够单击a1然后a2然后一个接一个地a3，首先让它完全隐藏第一个div，然后完全隐藏第二个div，然后显示第三个div。

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

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

此演示应提醒 （ 'took around 9 seconds to complete')

在公共 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;
});​

演示

使用 .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;
});

尝试创建一些带有队列的数组，并检查其中是否有内容，作为动画的回调，如果有，请再次运行它。我用过你的例子。

看看吧：

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) });

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

因此，使用 jQuery 文档示例：

$('#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

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

你可以做这样的事情：

(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)});
})();

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

在动画之前添加 stop（）：

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

使用这个 $(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);
    });
});

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

相关文章：