Jquery: анимировать список, начиная с первого и заканчивая последним, каждый начинает анимироваться через 45 мс после начала предыдущей LI - PullRequest
Новая
       22

Jquery: анимировать список, начиная с первого и заканчивая последним, каждый начинает анимироваться через 45 мс после начала предыдущей LI

0 голосов
/ 08 июля 2011

http://jsfiddle.net/nicktheandroid/QSdUz/5/

У меня есть список LI, я пытаюсь оживить их до нужных 15px, готово. Проблема в том, что я хочу, чтобы первый запускался, затем через 45 мс анимация следующего LI (первый LI все еще будет в середине анимации, когда запускается следующий), пока он не пройдет через все из них. Сейчас он ждет, пока завершится первый, а затем оживляет следующий, что неправильно.

Может кто-нибудь показать мне, как исправить эту функциональность, чтобы она была такой, как я описал выше? 

$('UL').hover(function(){

    doSlide($('UL li:first'))

}, function() {

    doReverseSlide($('UL li:first'))

})

function doSlide(current) {
    $(current).animate({
        right:0
    },200).delay(45, function(){
            doSlide($(current).next('li'));           
    }) 


}

Ответы [ 2 ]

0 голосов
/ 08 июля 2011

Вы можете запланировать все анимации одновременно, используя увеличивающуюся задержку, например: 

function doSlide() {
    window.slideOffset = 0;
    jQuery.each($("li"), function() {
        setTimeout($(this).animate, window.slideOffset, {right:0}, 200);
        window.slideOffset += 45;
    });
}

Обратите внимание, что для корректной работы в IE может потребоваться исправление setTimeout(), как описано здесь .

0 голосов
/ 08 июля 2011 
function doSlide(current) {
    $(current).animate({
        right:0
    },200);
    // mix some javascript in with your jQuery ;)
    setTimeout(function(){
            doSlide($(current).next('li'));           
    },45);
}

http://jsfiddle.net/QSdUz/6/

и с реверсом

http://jsfiddle.net/QSdUz/7/

... мне нравится эффект. Я мог бы использовать это сам для чего-то.

...