带有函数的Jquery动画不会排队：false

Posted 2023-05-08

【中文标题】带有函数的Jquery动画不会排队：false

【英文标题】：Jquery animate with function won't queue: false

【发布时间】：2012-10-30 02:33:20

【问题描述】：

以下代码有问题：

$(".active").animate(
            opacity:0
        ,queue: false, duration:1000, function()  
            console.log("queue??");
            $(".active").css('display', 'none');
            $(".active").removeClass("active");
            initiatePage();
        );

添加queue: false 后，function() 根本不运行...但如果我不运行，他们只会排队，我也不希望这种情况发生.. 有没有办法制作这个动画以及随之而来的一切queue: false??

如果我能提供任何让您更容易提供帮助的东西，请告诉我。

谢谢！

【参考方案1】：

阅读animate() 手册。使用options 时，应使用complete 选项传递回调。

完成：动画完成后调用的函数。

$(".active").animate(opacity:0,
    queue       : false,
    duration    : 1000,
    complete    : function()   
        $(this).hide().removeClass('active');
        initiatePage();
    );

【讨论】：

在这种情况下，您还可以将 $('.active') 缓存到变量中

谢谢。实际上最好使用this，以防一个或多个元素同时通过动画。

很难从 OP 的代码中看出他是想让所有东西都动画还是只是当前的动画

complete 回调将为 jquery 堆栈中的每个元素单独运行一次。这样一个元素的动画回调只会影响它自己。

【参考方案2】：

使用核心插件jquery-timing，您可以缩短解决方案：

$(".active").animate(opacity:0,queue:'foo', duration:1000)
    .join('foo').hide().removeClass('active').then(initiatePage);

在 jQuery 链中使用 .join() 可以解决问题。