Jquery: как: когда отображается UL, сначала анимируйте LI влево на 20 пикселей, затем на 0 пикселей, затем сделайте второй LI, затем третий и т. Д.

Question

Когда UL.chapters имеет значение «slideDown», пусть первые «главы LI» анимируют свойство left до 20px, затем анимируют обратно до 0px, затем второй LI делает то же самое, затем третий и скоро. в моем коде все они анимируются сразу после того, как UL.chapters скользит вниз, как мне заставить их делать анимацию по 1 за раз, при этом вторая не запускается, пока не закончится первая, и т. д.

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

код обновлен.

Answer 1

Попробуйте это:

$(function() {
    $('h1').click(function() {
        $('.chapters').slideDown(500, function() {
            doSlide($('.chapters li:first'));
        });
    });

});


function doSlide(current) {
    $(current).animate({
        'left': '20px'
    }, function() {
        $(current).animate({
            'left': '0px'
        }, function() {
            doSlide($(current).next('li'));
        });
    });
}

Вызывает функцию анимации слайдов в первом <li>, а затем в функции обратного вызова для анимации, которая перемещает ее обратно в начальную позицию, вызывает функцию в следующем <li>.

Вот демонстрация в действии: http://jsfiddle.net/CBNgR/

Answer 2

Вы заметили, что 4-я строка вашего кода - это $ ('главы LI') вместо $ ('. Chapters LI')?

Также вы повторяете себя здесь. Попробуйте это:

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

Также убедитесь, что ваши LI настроены на абсолютное положение, иначе у вашей левой анимации будут проблемы.