Question

我使用jQuery .animate方法为一堆卡片制作动画。假设这些是视觉显示的四张牌[#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函数设置动画并更改卡片的class属性。

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

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

1 个答案: