jQuery slider - setTimeout crossbrowser glitch?

Question

Ok, I tried to create another slider of preloaded images (whatever you wanna call it) with only two directional buttons. Got the animations the way I wanted them and the control idea was from a tutorial.

(Tutorial: How to Make Auto-Advancing Slideshows )

So, I adapted the autoadvance solution to my needs and got everything working OK. But, when I tried to run it in FF (8.0) I got a little problem. After a button click it does everything as it should except the part where the animation continues after the preset 3 seconds time, while IE (8.0) does not have problems (didn't tested in other browsers).

What am I doing wrong?

Here is the necessary code:

Html part:

<div id=imgholder1>
    <div id="imgholder2"></div>
</div>
<div id="bwd" class="button"><</div>
<div id="fwd" class="button">></div>

jQuery/JavaScript:

var traker=0;
$(document).ready(function(){
    var numOfImages=4;
    var timeOut = null;

    (function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);     
    })();

    function preload(imgIndex,numImages){
        $("#imgholder1").css('background-image','url("'+imgIndex+'.jpg")');
        $("#imgholder2").hide(0);
        imgIndex < numImages ? imgIndex++ : imgIndex=1
        $("#imgholder2").css('background-image','url("'+imgIndex+'.jpg")');
        traker=imgIndex;
    }
    preload(1,numOfImages);

    function animate(imgIndex,numImages){
        $("#imgholder2").fadeIn("slow",function(){
            preload(imgIndex,numImages);
        });
    }

    $("#fwd").bind("click",function(e,simulated){
        animate(traker,numOfImages);
        if(!simulated){
            clearTimeout(timeOut);
            timeOut = setTimeout(autoAdvance,3000);
        }
    });

    $("#bwd").bind("click",function(){
        var temp=traker-2;
        if(temp == 0){temp=numOfImages;}
        if(temp == -1){temp=numOfImages-1;}
        $("#imgholder2").css('background-image','url("'+temp+'.jpg")');
        animate(temp,numOfImages);
        clearTimeout(timeOut);
        timeOut = setTimeout(autoAdvance,3000);
    });
});

Answer 1

At first glance, it looks like your timeout variable is in the wrong scope - declare it outside of everything so that it is shared between functions:

var traker=0;
var timeOut;

Personally, I also avoid using reserved method keywords that are close like that, so use:

var tmr;

Also, you should use window.setTimeout rather than just setTimeout

Answer 2

The Fix!

This:

(function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);
})();

should look like this:

function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);     
}
autoAdvance();

FF didn't recognize self calling function autoAdvance otherwise.