如何避免與計時器的鼠標事件衝突

我的目標是將一個元素懸停在網頁上，在這種情況下是一個li標籤，導致主圖像與另一個元素交換。當鼠標懸停在li標籤上時，備用圖像將可見。備用圖像在鼠標離開li標籤後的n秒內保持可見。直到備用圖像在n秒後交換回主圖像時，纔會再次觸發初始懸停操作。如何避免與計時器的鼠標事件衝突

我到目前爲止的搜索引導我到： Detect IF hovering over element with jQuery。我從Meligy 分叉的的jsfiddle以及與此想出了：

var $sample = $("#sample"); 
var $main = $("#main"); 
var $alt = $("#alt"); 

$alt.hide(); 

setInterval(function() { 
    if ($sample.is(":hover")) { 
     $main.hide(); 
     $alt.show(); 
    } else { 
     setInterval(function(){ 
      $alt.hide(); 
      $main.show(); 
     },3000); 
    } 
}, 200);

此外，jQuery on hover animation fires multiple times 和使用FC的的jsfiddle想出了這恰好是驚人地接近。

var $hover = $("#hover"); 
var $main = $("#main"); 
var $alt = $("#alt"); 

$alt.hide(); 

$hover.hover(

function() { 
    $alt.stop(true, true).show(); 
    $main.stop(true, true).hide(); 
}, 

function() { 
    $main.stop(true, true).show(2000); 
    $alt.stop(true, true).hide(2000); 
});

到目前爲止，我最近的事情低於但也有少數徘徊後的圖像撲來回失控。

var $hover = $("#hover"); 
var $main = $("#main"); 
var $alt = $("#alt"); 

$alt.hide(); 


$hover.hover(function() { 
    if ($main.is(":visible")) { 
     $main.hide(); 
     $alt.show(); 
    } 
}, function() { 
    setInterval(function() { 

     // Also attempted $main.is(":hidden") 

     if ($main.not(":visible")){ 
      $alt.hide(); 
      $main.show(); 
     } 
    }, 3000); 
});

謝謝大家。

來源

2015-06-14 Snipe

通訊jsfiddles： FIRST --https：//jsfiddle.net/dsbarnes/89jd73kx/2/ - SECOND - https://jsfiddle.net/dsbarnes/g66jfwfj/1/ - THIRD - - https://jsfiddle.net/dsbarnes/m18voLeL/3/ 總得有10代表超過2鏈接... – Snipe

使用超時來避免此行爲。原因是，無論懸停如何，間隔（超時）也會觸發。如果您離開/重新輸入元素，則必須取消正在運行的超時/間隔。我對您的代碼進行一些編輯用於測試目的：

var timer = null; 

$hover.on('mouseenter', function() { 
    if (window.timer != null) 
     clearTimeout(window.timer); 

     $main.hide(); 
     $alt.show(); 
}); 

$hover.on('mouseout', function() { 
    window.timer = setTimeout(function() { 
     // Also attempted $main.is(":hidden") 
     $alt.hide(); 
     $main.show(); 
    }, 3000); 
});

更新小提琴：https://jsfiddle.net/m18voLeL/5/

來源

2015-06-14 20:18:21 Tyr

非常感謝 - 不會想到我自己。乾杯。 – Snipe

如何避免與計時器的鼠標事件衝突

回答

相關問題