jQuery.animateでDOMオブジェクトを動的に渡す

Question

jQuery .animateメソッドを使用してスタックしたカードをアニメーション化しています。これらを仮定 4枚のカードが視覚的にあなたがクリックしたときに、今私はクリック、次々にこれらのそれぞれをアニメーション化する[#card1][#card2][#card3][#card4][#card5]

彼らのdivタグ、#card1、#card2、#card3、#card4は、アレイcardStack() に格納されて表示されますそれら。 どうすればいいですか

while(cardStack[0]!="undefined"){ 
    $('#cardStack[0]').click(function() {  
    $('#cardStack[0]').animate({"left": "+=130px","z-index": "1",queue:false},500); 
}); 
i--; 
} 

これは可能ですか？

保存カードの配列への参照：あなたが実際に何かを学ぶことができるように

Answer 1

私は、ソースに注釈を付けます。

var cards = $('#cards div'); 

最初に反転したカードは、私たちのアレイの外にあります。

var flippedIndex = cards.length; 

次に、我々は、カードが反転された情報を含む、（cards配列と同じ長さを有する）配列を作成します。

var flipped = new Array(flippedIndex); 

flip機能は、カードのクラス属性をアニメーション化および変更します。

var flip = function (card, toggle) { 
    card.slideUp(function() { 
     card.toggleClass('back', toggle) 
      .slideDown(); 
    }); 
}; 

ここで、クリックリスナーを設定します。

cards.click(function() { 
    var card = $(this), 

.index()（http://api.jquery.com/index/は）あなたは、左から右にカードの位置を与えます。

index = card.index(); 

はカードが反転しているかどうかを確認するために私たちのflipped配列を検索し、それが最後のカードを裏返しだことを確認してください。

if (!flipped[index] && index + 1 === flippedIndex) { 
     flippedIndex = index; 

ここでは、カードを反転します。

flip(card, (flipped[index] = true)); 
} else if (flipped[index] && index === flippedIndex) { 
    flippedIndex++; 

ここでは解除します。

 flip(card, (flipped[index] = false)); 
    } 
});