0

我正在尝试创建一个停止灯动画（以红色>黄色>绿色开始的旋转闪烁灯），当我将鼠标悬停在任何灯上时，它会暂停动画并点亮所选灯并显示悬停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);
};
4

2 回答 2

0

您是否尝试在触发 mouseenter 事件后立即重置所有灯的背景位置？就像是：

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

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

于 2012-06-25T01:49:09.873 回答
0

这是一个很大的帮助：

鼠标退出时清除超时

这是我的最终代码

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();?
于 2012-06-25T06:11:12.203 回答