Передача объекта DOM динамически в jQuery.animate

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 анимирует и изменяет атрибут класса карты.

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