Question

这是我的情况。我正试图在一个元素上同时做几个动画;然而，随着UI线程“功能”和JQuery的动画队列，它变得麻烦。

我正在为一个站点设计一个可重用的控件库，我想要做的一件事就是拥有一个多类属性系统来在ready()上启动不同的动画。

例如：

<div class="fadein loadingbar"></div>

使用CSS作为.loadingbar的图像背景，然后使用JQuery无限期地为加载栏的背景设置动画：

$(".loadingbar").each(function(){
            $(this).css({backgroundPosition:"0px 0px"});
            $(this).animate({backgroundPosition:"(-65px 0px)"}, (($(this).height() / 35) * 2000) + 600, "linear", function(){_n3_animLoadBars(this)});
        });

以及fadeIn()类的.fadein动画：

$(".fadein").each(function(){
       $(this).css({opacity:0,visibility:"visible"})
       .animate({opacity:1}, {duration:1000});
    });

然而;让它们异步制作动画的唯一方法是为{queue:false}函数执行.animate()，这可以正常工作，直到我想延迟淡入动画：

$(".fadein").each(function(){
           $(this).css({opacity:0,visibility:"visible"})
           .delay(800)
           .animate({opacity:1}, {duration:1000,queue:false});
        });

完全跳过.delay()调用，因为它没有排队（因此不会在fx堆栈上的延迟之后立即放置动画提示）。

唯一的解决方法是用另一个div包装div：

<div class="fadein"><div class="loadingbar"></div></div>

然后取出{queue:false}。

虽然这样可行，但javascript应该足够先进，所以标记不一定非常混乱（通常这样的简单div包装对我来说很好，但我是为我个人设计的娱乐和如果可能的话，我想将其保留为单个。

我缺少任何关于JQuery的快速修复，或者有没有办法通过编写插件来实现这一点？

任何见解都会有所帮助！

Answer 1

找到了解决方案 - 它比我想象的要容易。

我没有在淡入淡出中指定{queue:false}，而是在背景动画上指定它，让淡入淡出排队。

JQuery：比queue更好的方式：false或div包装器

1 个答案: