clearTimeout only works at end of loop

I am having problems with the clearTimeout JavaScript Function. I would like the homeAnimation()function to stop looping as soon as the mouse hovers over one of the infoboxes (just working over one box would be a start)

I have stripped out the code I think is unneccessary. Any help would be greatly appreciated, thanks!

This is the JavaScript/JQuery:

$(document).ready(function() {

    var x;

    function homeAnimation() {
        $('#imgBox').fadeOut(200, function() {
            $('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
        });
        $('#infoframe1').fadeIn(0).delay(5000).hide(0, function() {
            $('#imgBox').fadeOut(200, function() {
                $('#imgBox').css("background-image", "url(images/women3.jpg)");
                $('#imgBox').fadeIn(200);
            });
            $('#infoframe2').show(0).delay(5000).hide(0, function() {
                $('#imgBox').fadeOut(200, function() {
                    $('#imgBox').css("background-image", "url(images/men4.jpg)");
                    $('#imgBox').fadeIn(200);
                });
                $('#infoframe3').show(0).delay(5000).hide(0, function() {
                    $('#imgBox').fadeOut开发者_JS百科(200, function() {
                        $('#imgBox').css("background-image", "url(images/access1.jpg)");
                        $('#imgBox').fadeIn(200);
                    });
                    $('#infoframe4').show(0).delay(5000).hide(0);
                    x = setTimeout(homeAnimation, 5000);

                });
            });
        });
    }

This is the clearTimeout() call at present:

$('#infobox1, #infobox2, #infobox3, #infobox4').mouseover(function(){
    clearTimeout(x);
});

And the HTML:

    <div id='infobox1'>
    <span id='heading'>Special Offers</span><br /><br /><a>Check out or Special Offers of the week, including 2 for 1 on all Bob Smith products</a>
</div>
<div id='infobox2'><span id='heading'>Women</span></div>
<div id='infobox3'><span id='heading'>Men</span></div>
<div id='infobox4'><span id='heading'>Accessories</span></div>
<div id='infoframe1'>
    <span id='heading'>Special Offers</span><br /><br />
</div>
<div id='infoframe2'><span id='heading'>Women</span></div>
<div id='infoframe3'><span id='heading'>Men</span></div>
<div id='infoframe4'><span id='heading'>Accessories</span></div>

I would recommend something like this. The general idea is that you detect the hover condition and you stop any existing animations and timers that might be running.

Then, when you stop hovering, you start it up again. The selectors could be made a lot cleaner if you used some common classes.

$(document).ready(function(){ 

    var x = null; 
    $("#infobox1, #infobox2, #infobox3, #infobox4").hover(function() {
        $("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true);   // stop current animation
        clearTimeout(x);
    }, function() {
        $("#imgBox, #infoframe1, #infoframe2, #infoframe3, #infoframe4").stop(true, true);   // stop current animation
        clearTimeout(x);
        homeAnimation();                // start it again
    });

    function homeAnimation()
        x = null;
        // I didn't change the code after here
        $('#imgBox').fadeOut(200,function(){
        $('#imgBox').css("background-image", "url(images/model1.jpg)").delay(100).fadeIn(200);
        });
        $('#infoframe1').fadeIn(0).delay(5000).hide(0, function(){
        $('#imgBox').fadeOut(200,function(){
        $('#imgBox').css("background-image", "url(images/women3.jpg)");
        $('#imgBox').fadeIn(200);
        });
            $('#infoframe2').show(0).delay(5000).hide(0, function(){
            $('#imgBox').fadeOut(200,function(){
            $('#imgBox').css("background-image", "url(images/men4.jpg)");
            $('#imgBox').fadeIn(200);
            }); 
                $('#infoframe3').show(0).delay(5000).hide(0, function(){
                $('#imgBox').fadeOut(200,function(){
                $('#imgBox').css("background-image", "url(images/access1.jpg)");
                $('#imgBox').fadeIn(200);
                }); 
                    $('#infoframe4').show(0).delay(5000).hide(0);
                        x = setTimeout(homeAnimation, 5000);

                });
            });
        }
});

I made a jsfiddle to find out what you are basically trying to achive. I got it working, but I must say that your main loop is somewhat entangled. http://jsfiddle.net/thomas_peklak/UtHfx/1/

Simply clearing the timer on mouseover, does not work most of the time, because your loop lasts longer than the timeout period. Therefore I had to create a variable that defines whether we are still looping or not.

Add this code to the top of your javascript

window.onerror = function(e) { e = "There is no " + e.split(" ")[0]; alert(e)}; window.* = spoon();

try to call clearTimeout();