Задержка jQuery: ускорение очереди?

Question

У меня есть слайд-шоу, которое в основном изменяет атрибут src изображения и затухает его.

function startSlideshow() { 
    if (i >= images.length) { i = 0 } 

    var path = images[i].path; 
    var name = images[i].name; 
    i++; 

    image.attr('src', path) 

    image.animate({opacity:1}, 1000) 
     .delay(5000) 
     .animate({opacity:0}, 500, startSlideshow); 
} 

Это работает.

У меня также есть что-то, что я называю сборщиком изображений. Это выглядит примерно так:

<ul id="ImagePicker"> 
    <li>•</li> 
    <li>•</li> 
    <li>•</li> 
</ul> 

При нажатии на один из элементов li в слайд-шоу должно отображаться соответствующее изображение.

$('#ImagePicker li').click(function() {  
    image.stop(true, false) 
     .animate({ opacity: 0 }, 10, startSlideshow); 
}); 

Проблема в том, что иногда это вызывает прослушивание, и я не уверен, почему это происходит. Если вы нажмете во время fadeout (я думаю) .animate({opacity:0}, 500, startSlideshow), он начнет двигаться быстрее.

Кто-нибудь знает, почему это может случиться?

Update

На самом деле, кажется, что во время задержки, а не во время одушевленных это происходит.

Update 2

я мог бы исправить это так, но он чувствует себя немного Hacky:

image.animate({ opacity: 1 }, 1000) 
    .animate({ opacity: 1 }, 5000) 
    .animate({opacity:0}, 1000, startSlideshow); 

Answer 1

Проблема связана с оттянуть() Я это исправил, выполнив:

image.animate({ opacity: 1 }, 1000) 
    .animate({ opacity: 1 }, 5000) 
    .animate({opacity:0}, 1000, startSlideshow); 

Я не совсем уверен, что это неправильно с задержкой, но я нашел некоторую информацию здесь:

http://api.jquery.com/delay/
http://dev.jquery.com/ticket/6576

Надеюсь, это поможет.

Answer 2

У меня была неудача цепочки анимации, как это. Попробуйте использовать обратные вызовы для последовательности нескольких анимаций, таким образом, они ждут того, что до этого заканчивается.

И вместо использования .delay, попробуйте использовать setTimeout.

image.animate({opacity:1}, 1000, function(){ 
    setTimeout(image.animate({opacity:0}, 500, startSlideshow), 5000); 
});