在 jQuery.animate 中动态传递 DOM 对象

Question

我正在使用 jQuery .animate 方法来制作一堆卡片的动画。 假设这些是视觉上显示的四张卡片 [#card1][#card2][#card3][#card4][#card5]

它们的 div 标签 , #card1 , < code>#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));
    }
});