2011-08-05 13 views
8

を私は次の操作を実行したい:simutaneously複数の要素をフェード - jqueryの

$(newPanel, prevBtn, nextBtn, infoPanel).fadeIn(200, function() { 
} 

これらのVARSはjqueryの

で作成したdivのですが、最初の要素だけがフェードイン、私は本当にフェードインするすべての要素を必要とします同時に。何か案が?

newPanel = $("#newPanel"); 

だけ書く:

答えて

22

あなたは同じjQueryオブジェクトの要素を取得するためにaddメソッドを使用することができます。

newPanel.add(prevBtn).add(nextBtn).add(infoPanel).fadeIn(200); 
+0

ああ、それはとてもいいです。次回はそれを試みます。 – inquam

+0

@Guffaコールバックを追加し、コールバックを4回実行しました。これはどんなグループにも当てはまりますか? – Wesley

+1

@Wesley:jQueryオブジェクトに4つの要素があるので、各アニメーションには独自のコールバックがあります。ドキュメントから: "複数の要素がアニメーション化されている場合、コールバックは一致する要素ごとに1回実行され、アニメーション全体では一度だけ実行されないことに注意することが重要です。 http://api.jquery.com/fadeIn/ – Guffa

1

newPanelなどがそのように作成された変数であることを仮定し

newPanel.fadeIn(200); 
prevBtn.fadeIn(200); 
nextBtn.fadeIn(200); 
infoPanel.fadeIn(200); 
更新
0
$.each([newPanel, prevBtn, nextBtn, infoPanel], function(i, el) { 
    $(el).fadeIn(200); 
}); 


そして、あなたは、関数を呼び出すしたい場合一度だけ、要素を追加することで何かlike @Guffa didを行うことができます同じjQueryの収集だけにして(1回)アニメーションを適用します。

[newPanel, prevBtn, nextBtn, infoPanel] 
    .reduce(function(el, next) { 
     return el.add(next); 
    }) 
    .fadeIn(200); 
+0

これは一度に1つずつ行うのと同じではありませんか? – 472084

0

どちらかそれは$.eachを使用してくださいそれを使ってクラスやIDでそれらをグループ化してフェードすることをお勧めします。

たとえば、関連するすべての要素をクラスにグループ化し、次にすべての要素ではなくそれらのクラスを呼び出して$.eachを呼び出すことができます。

+0

コールバックを追加すると、そのクラスを持つ各要素に対して実行されますか?私はちょうど一度呼ばれるコールバックをしたい。 @inquam – Wesley

+1

アニメーションが終了したときに呼び出されるコールバックがあれば、そのクラスを使用している要素のコレクション全体に対して1回、またはそのクラスを使用するすべての要素に対して1回トリガーされますか?私は実際に心から知らない。私はそれが各要素に付いていると思うので、それはすべての要素に対して1回トリガーすると思います。これは、コールバックがすでに一度呼び出されているかどうかをチェックすることによって克服することができます。 'if(!firsttime)return;のようなものです。おそらく世界で最も美しいものではないが、それはうまくいくだろう。 – inquam

関連する問題