0

これが私の状況です。1つの要素に対して一度に複数のアニメーションを実行しようとしています。ただし、UIスレッドの「機能」とJQueryのアニメーションキューを使用すると、面倒になります。

私はサイト用に再利用可能なコントロールライブラリを設計しています。私がやりたかったことの1つは、でさまざまなアニメーションを開始するためのマルチクラス属性システムを用意することでした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 に答える