jQuery timing SetInterval

Question

Итак, я, очевидно, что-то здесь не вижу. Я знаю, что это возвращается к синхронной/асинхронной вещи, но я не могу понять это.

Я пытаюсь создать карусель изображений, которая скользит по ряду изображений слева при наведении и останавливается, когда наведите указатель мыши.

Общая логика для слайдера идет что-то вроде этого:

По умолчанию состояния: есть куча изображений плавало слева рядом друг с другом, простирающимися за край окна просмотра: (Hash знаков являются окном просмотра)

# [IMAGE-1] [IMAGE-2] # [IMAGE-3]

Я использую одушевленные, чтобы дать IMAGE-1 отрицательный запас, потянув его из окна просмотра.

[IMAGE-1] # [IMAGE-2] [IMAGE-3] #

Я хотел бы затем переместить IMAGE-1 до конца последовательности, установить его рентабельность обратно в 0, и сделайте это снова.

# [IMAGE-2] [IMAGE-3] # [IMAGE-1]

Так что моя проблема в том, IMAGE-1 становится перемещается в конец последовательности до анимации отделки , Я предполагаю, что происходит то, что функция анимации и бит, который перемещает изображение-1, срабатывают одновременно. Я хотел бы привести эти команды в порядок, так что, когда кто-нибудь закончит, начнется другое.

Вот моя функция:

function slideLoop(div) { 
    var width = div.find("img:first").width(); 
    var i = setInterval(function(){ 
     var images = div.find("img"); 
     var first = images.first(); 
     images.last().css("marginLeft", 0); 
     first.animate({marginLeft: 0 - width + "px"}, 4000, "linear"); 
     images.last().after(images.first()); 
    }, 4000); 
} 

Заранее спасибо.

Answer 1

Как @roasted говорит, что вам нужно, чтобы зарегистрировать действия в функции обратного вызова, animate устанавливает все, но возвращается не дожидаясь animaton случиться:

function slideLoop(div) { 
    var width = div.find("img:first").width(); 
    var i = setInterval(function(){ 
     var images = div.find("img"); 
     var first = images.first(); 
     images.last().css("marginLeft", 0); 
     first.animate({marginLeft: 0 - width + "px"}, 4000, "linear",function(){ 
      images.last().after(images.first()); 
     }); 
    }, 4000); 
}