setTimeout и проблема с анимацией

Question

Пожалуйста, помогите!У меня здесь странная проблема.

DEMO

Проблема в этой галерее заключается в том, что если вы быстро или медленно наведите курсор мыши DURING анимация
чем галерея «сходит с ума», ведет себя так, как .animate () борется с setTimeout.

AFAIK - вы не можете использовать setInterval здесь, потому что если вы вернетесь в галерею из другой «вкладки»галерея ведет себя так, как будто она компенсирует все анимации (во время бездействия) - сразу.

Пожалуйста, помогите мне разобраться в этой проблеме и найти решение.
Заранее спасибо!

Код, используемый для галла.:

var galW = $('#gallery').width(),
    imgN = $('#slider img').length,
    c = 1,   // counter
    timeOut,
    pause = false;

$('#slider').width(galW * imgN);

function auto() {
    if (pause) { return; }                        // if hovered : stop 'timeOut'
    timeOut = setTimeout(function() {
        c++;
        if (c === (imgN + 1)) {
            c = 1;
        }
        $('#slider').animate({left: '-' + galW * (c - 1) + 'px'}, 1200, auto);
    }, 1900);
}
auto();

$('#galcontainer').hover(function() {
    pause = true;
    clearTimeout(timeOut);
}, function() {
    pause = false;
    auto();
});

Answer 1

Взгляните на это

http://jsfiddle.net/8Lzxs/3/

var galW = $('#gallery').width(),
    imgN = $('#slider img').length,
    c = 1,   // counter
    timeOut,
    pause = false;

$('#slider').width(galW * imgN);

function auto() {
    if (pause) { return; }                       
    clearTimeout(timeOut);               // THE (added) FIX !!!!!!!!! //
    timeOut = setTimeout(function() {
        c++;
        if (c === (imgN + 1)) {
            c = 1;
        }
        $('#slider').animate({left: '-' + galW * (c - 1) + 'px'}, 1200, auto);
    }, 1900);
}
auto();

$('#galcontainer').hover(function() {
    pause = true;
    clearTimeout(timeOut);
}, function() {
    pause = false;
    auto();
});