0

私は完全な初心者です。xmlファイルからの情報に応じて任意の数の要素のアニメーション化を処理できるコードを作成しようとしています。私が達成しようとしている4つのステップがあります。

  1. コンテナdivのすべての子要素を、すべての要素が表示されるまで1つずつフェードインします。
  2. 遅延してから、コンテナdiv内のすべての要素を一度にフェードアウトします。
  3. 次のコンテナdivに移動し、そこにある子要素で同じことを行います...など。
  4. ループ。

これまでのところ、私はまだステップ1で立ち往生しています。子要素を順番にフェードインさせることはできますが、それらが属するコンテナーdivに関係なく、すべてフェードインします。そして、すべてが消えます。最初のコンテナdivをすべての要素でフェードインさせてから、他に何もトリガーせずに消えるまで、残りの要素を理解することはできません。いろいろ試してみましたが、なかなか行けず、何が悪いのかわかりません。これまでの私のコードは次のとおりです。

$('.element').find('.inner').each(function(index){
    $(this).delay(2000*index).fadeIn(2000); 
});
$('.inner').promise().done(function() {
// my callback
    $('.element').delay(4000).fadeOut(2000);
});
4

2 に答える 2

0

ステップ1の場合：divの最初の子をfadeInし、fadeInに渡された完全なコールバック関数で、要素の次の兄弟を取得し、次の兄弟がなくなるまでフェードインする必要があります。このようなもの（擬似コード）：

var fadeInCallback = function(evt) {
  //this will reference the object that fadeIn was called on
  if( $(this).next().size() > 0 ) {
    $(this).next().fadeIn( 2000, fadeInCallback );
  }
};
$('.element div:first-child').fadeIn( 2000, fadeInCallback );

http://api.jquery.com/first-child-selector/およびhttp://api.jquery.com/next/を参照してください。

于 2012-10-24T20:00:45.677 に答える
0

jQueryのタイミングの問題とアニメーションの同期には、jquery-timingというクールなプラグインがあります。非常に簡単な連鎖構文を提供します。次のサンプルコードはシングルチェーンです。

// 1. Fade in all child elements of a container div, one by one until all elements are visible.
// 2. Delay, and then fade out all elements in the container div at once.
$('.someDiv .inner').each($).fadeIn(2000,$).all().wait(4000).fadeOut(2000);

複数のdivに対してその動作をループするには、そのプラグインのrepeat（）メソッドも必要です。ここでも、すべてのアニメーションの待機をすべて自動的に行う単一のjQueryチェーンがあります。

// Move on to the next container div and do the same with the child elements there...and so on.
// Loop.
$('.divs').repeat().each($).find('.inner')
    .each($).fadeIn(2000,$).all().wait(4000).fadeOut(2000,$);

これは、アニメーションのコード全体です。

楽しむ。

于 2012-10-24T20:50:41.763 に答える