Question

Please help!
I have a strange issue here.

DEMO

The issue in this gallery is that if you mouseover/mouseout fast DURING the animation
than the gallery goes ‘crazy’, behaving like the .animate() is fighting with setTimeout.

AFAIK – you cannot use setInterval here, cause if you return to the gallery from another ‘tab’ the gallery behave like it’s going to compensate all the animations (during the inactivity) – at once.

Please help me understand this issue and find a fix.

Thanks in advance!

The code used for the gall.:

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

Take a look at this

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();
});