CSS Stop Light with jQuery
<p>I'm trying to create a stop light animation (rotating flashing light starting with red > yellow > green) and when I hover over any of the lights, it would pause the animation and light up the selected light and show a hover div.</p>

<p>So far everything is working (though I'm sure code could use some optimization) but when I hover over any of the lights, the animation DOES NOT stop immediately. I tried using clearTimeout &amp; clearInternal but nothing is working.</p>

<p>jsfiddle: <a href="http://jsfiddle.net/JZ86B/" rel="nofollow">http://jsfiddle.net/JZ86B/</a></p>

<p>Here's my jQuery</p>

<pre><code>stopLight();

$('[class^="stopLight"]').mouseenter(function(){
     clearTimeout(window.flashLightTimer);
     clearInterval(window.stopLightInterval);
     $(this).css('background-position-x','-106px');
     $(this).find('span').fadeIn('fast');
}).mouseleave(function() {
     $(this).css('background-position-x','0px');         
     $(this).find('span').hide('fast');
     stopLight();
}); 

function stopLight() {
    window.stopLightInterval = setInterval(function() {
        flashLight('red',1000);     
        flashLight('yellow',2000);
        flashLight('green',3000);
    }, 3000);
};

function flashLight (a, b) {
    window.flashLightTimer = setTimeout(function(){
        $(".stopLight-"+a).animate({
            'background-position-x': '-106px'
        }, 0, 'linear')
        .delay(1000)
        .animate({
            'background-position-x': '0px'
        }, 0, 'linear')
    }, b);
};
</code></pre>
