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

これは大きな助けになりました：

マウス終了時の clearTimeout

これが私の最終的なコードです

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 に答える