带有jQuery的CSS停车灯

Question

我正在尝试创建一个停止灯动画(旋转闪光灯以红色>黄色>绿色开始)，当我将鼠标悬停在任何一个灯上时，它会暂停动画并照亮所选的灯并显示悬停div。

到目前为止，一切都在工作(尽管我确信代码可以使用一些优化)，但是当我将鼠标悬停在任何一个灯光上时，动画并没有立即停止。我试着使用clearTimeout & clearInternal，但是什么都不起作用。

jsfiddle：http://jsfiddle.net/JZ86B/

这是我的jQuery

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

Answer 1

您是否已尝试在鼠标输入事件被激发时立即重置所有灯光的背景位置？类似于：

$(".light div").css('background-position-x','0px');

你需要做更多的调整，但这至少会立即“取消”所有其他的灯光。

Answer 2

这是一个很大的帮助：

clearTimeout on Mouse Exit

这是我的最终代码

var timerID = [];

$('[class^="stopLight"]').mouseenter(function() {
    $(this).css('background-position-x', '-106px');
    $(this).find('span').fadeIn('fast');
    for (var i = 0; i < timerID.length; i++) {
        clearTimeout(timerID[i]);
    };
    clearInterval(window.stopLightInterval);    
}).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) {
    timer = setTimeout(function() {
        $(".stopLight-" + a).animate({
            'background-position-x': '-106px'
        }, 0, 'linear').delay(1000).animate({
            'background-position-x': '0px'
        }, 0, 'linear')
    }, b);
    timerID.push(timer);
};

stopLight();?