在jQuery.animate中動態傳遞DOM對象

我正在使用jQuery .animate方法來動畫一堆卡片。假設這些都直觀地顯示[#card1][#card2][#card3][#card4][#card5]在jQuery.animate中動態傳遞DOM對象

四張牌他們的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--; 
}

這是可能的嗎？

來源

2011-07-05 maverick340

像你點擊左邊的一個，然後他們一個接一個地動畫，或者你點擊左邊的那個，只有左邊的一個動畫？ – AlienWebguy

你有jQuery對象存儲在你的數組中嗎？或只是ids？ –

@AlienWebguy：我點擊最左邊，然後滑出左邊，然後我點擊下一張外露的卡片，它滑出。 – maverick340

我會標註來源，這樣你就可以真正學到一些東西：

保存參考卡的陣列。

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)); 
    } 
});

來源

2011-07-05 08:41:02 katspaugh

與上述問題是，我可以點擊第二張或第三張卡也。我希望用戶只能點擊最右側的卡。有點像在現實生活中，你只能一張一張地滑出開放的卡片。 – maverick340

http://jsfiddle.net/yak5C/3/ 這是我想要做的事情。 – maverick340

我明白了，在這裏，你去：http://jsfiddle.net/U32qt/4/ – katspaugh

在jQuery.animate中動態傳遞DOM對象

回答

相關問題