在同一時間從事件偵聽器運行衝突功能

我有一個片，其上的監聽鼠標，使一個div淡出和背面中的JavaScript代碼。在同一時間從事件偵聽器運行衝突功能

我的問題是，如果用戶鼠標懸停多次從而導致該函數的邏輯，以執行以下操作：

mouse over¬ 
    fade out 
    fade in [mouse over again] ¬ 
        fade out

在這點i同時具有fade out和fade in同時出現導致對DIV怪異閃爍。我不知道如何防止它。

工作小提琴：http://jsfiddle.net/WgNuX/4/非常快速地將鼠標移出div，並且會閃爍。

我的代碼如下：

function check(){ 
    var div_id = document.getElementById('my_div'); 
    var opacity = window.getComputedStyle(div_id).opacity; 

    function fade_in(){ 
     var opacity = window.getComputedStyle(div_id).opacity; 
     var direction =1 ; //fade in 

     transition_opacity(div_id,opacity,direction,0) 
    } 


    var direction = 0; //fade out first 
    transition_opacity(div_id,opacity,direction,fade_in) 

} 

var div_id = document.getElementById('my_div'); 
div_id.addEventListener('mouseover',check,false);

我能做些什麼來防止這種情況的出現？

來源

2013-10-23 Sir

是jQuery的一個選項？我可以在jquery中複製進程並添加stop（）方法，以幫助角色覆蓋進程對您的視覺圖表保持真實。 – blackhawk

不，我不使用圖書館 – Sir

在淡出/淡入淡出過程中，您可以[刪除eventlistener]（http://jsfiddle.net/TggTY/1/）。 – Teemu

jsFiddle Demo

你或許應該只使用一個標誌來控制運動。

var busy = false; 
function check(){ 
if(busy) return; 
busy = true; 
... 
function fade_in(){ 
var opacity = window.getComputedStyle(div_id).opacity; 
var direction =1 ; //fade in 
transition_opacity(div_id,opacity,direction,function(){busy=false;}); 
}

這將阻止動畫開始，直到它完成。

來源

2013-10-23 20:10:11

將淡入的狀態存儲在全局變量/隱藏輸入字段中。 1開始時，停止時爲零。不跑淡出如果變量是1

來源

2013-10-23 20:08:58 JCleveland

在同一時間從事件偵聽器運行衝突功能

回答

相關問題