JQuery：キューよりも良い方法：falseまたはdivラッパー

Question

ここは私の状況です。私は一度に一つの要素に対していくつかのアニメーションをしようとしています。しかし、UIスレッド 'feature'とJQueryのアニメーションキューでは面倒になっています。

私はサイトの再利用可能なコントロールライブラリを設計しています。私がしたいことの1つは、ready()で異なるアニメーションを開始するマルチクラス属性システムを持つことでした。例えば

：.loadingbar用画像背景のCSSと

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

、次に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}); 
    }); 

しかし、彼らは非同期にアニメーション化するために取得する唯一の方法は、私が遅延にしたいまで正常に動作.animate()機能、のため{queue:false}を行うことですフェードインアニメーション：

$(".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}を取ります。これは動作しますが、マークアップは、その厄介な（通常、そのような単純なdivのラップは私と罰金である必要はありませんでしたので、

---

は、Javascriptをおそらく十分に前進するつもりだったが、私はこれを設計しています可能であれば、私はそれを1つの部門にしておきたいと思います。

JQueryを使ってすばやく修正したり、プラグインを作成する方法がありますか？

洞察力は役立ちます。

Answer 1

解決策が見つかりました - 私が思ったよりも簡単でした。

フェードインで{queue:false}を指定する代わりに、フェードインをキューに入れたままバックグラウンドアニメーションで指定しました。