0

这是我的情况。我试图一次在一个元素上做几个动画；然而，随着 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 包装对我来说很好，但我设计它是为了我自己的个人娱乐，我如果可能的话，希望将其保留为单个 div）。

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

任何见解都会有所帮助！

4

1 回答 1

0

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

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

于 2012-04-19T23:42:49.397 回答