clearTimeout only works at end of loop
<p>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)</p>

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

<p>This is the JavaScript/JQuery:</p>

<pre><code>$(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(200, function() {
                        $('#imgBox').css("background-image", "url(images/access1.jpg)");
                        $('#imgBox').fadeIn(200);
                    });
                    $('#infoframe4').show(0).delay(5000).hide(0);
                    x = setTimeout(homeAnimation, 5000);

                });
            });
        });
    }
</code></pre>

<p>This is the clearTimeout() call at present:</p>

<pre><code>$('#infobox1, #infobox2, #infobox3, #infobox4').mouseover(function(){
    clearTimeout(x);
});
</code></pre>

<p>And the HTML:</p>

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