Jquery懸停隱藏/顯示：setTimeout clearTimeout

所以我有一個元素（鏈接），通過懸停在它上面來控制另一個元素（目標）的可見性。當鼠標懸停鏈接時，目標應該轉爲可見狀態，當鼠標離開時，目標應在2秒後變爲不可見狀態。Jquery懸停隱藏/顯示：setTimeout clearTimeout

到目前爲止這麼好。但我該如何做到這一點，以便在2秒鐘之前將鼠標懸停在可見目標上方時，目標保持可見狀態？

我用setTimeout和clearTimeout搞定了一些工作，但它確實很麻煩，而且感覺不太好。

var time = 1000; 
$(".link").hover(

     function() { 
     $('.target').css('display', 'none'); 
     clearTimeout($(this).data('timeout')); 
      $('.target').css({'display': 'block'}); 
     }, 

     function() { 

     var timer = setTimeout(function() {$('.target').fadeOut(1000).delay(100).css('display', 'none'); clearTimeout(timer); }, time); 

     $('.target').hover(
       function() { 
       clearTimeout(timer); 
       }, 
       function() { 
       var timer = setTimeout(function() {$('.target').fadeOut(1000).delay(100).css('display', 'none'); clearTimeout(timer); }, time); 
       } 
      );   
     } 

);

（http://jsfiddle.net/VfDkq/）

任何幫助，將不勝感激。

乾杯

來源

2012-11-02 Pedro Gonçalves

嘗試重新分解代碼中的位：

(function() { 

    var time = 1000, 
     timer; 

    function handlerIn() { 
     clearTimeout(timer); 
     $('.target').stop(true).css('opacity', 1).show(); 
    } 
    function handlerOut() { 
     timer = setTimeout(function() { 
      $('.target').fadeOut(3000); 
     }, time); 
    } 

    $(".link, .target").hover(handlerIn, handlerOut); 

}());

Live demo

這應該是非常接近你的描述的行爲。當您在mouseenter淡出時，我還添加了一條額外的線條，以便在handlerIn中看到。

一對夫婦的錯誤，我從你的代碼帶走：

給你另一個timer var聲明內mouseleave處理程序，不能在任何地方取消之一。 timer必須可以在一個共同的範圍內訪問;
您在同步方法.css之前應用了動畫延遲，但沒有任何效果;
在fadeOut完成後，將display設置爲none毫無意義，它會自動完成;
在執行任一操作後，沒有必要清除setTimeout。

來源

2012-11-02 18:29:44

感覺真的很接近，但是創造馬車行爲的事件仍然存在。忘了在原帖中提及它。如果您在離開後立即將鏈接懸停，則超時不會清除。換句話說。如果你真的很快從鏈接區域進出，那麼目標div仍然會走路，有時它會產生一些不穩定的行爲。 –

我明白了。這很奇怪，我會檢查代碼。 –

當然，我忘了分配'定時器'var變焦我的壞。 @PedroGonçalves剛剛更新了我的代碼和小提琴。 –

您正在使用太多延遲和淡出持續時間。瀏覽器不喜歡它。你介意用hide（）而不是那些？

http://jsfiddle.net/VfDkq/4/

var timer = setTimeout(function() {$('.target').hide().css('display', 'none'); clearTimeout(timer); }

或者你可以減少延遲時間和持續時間淡出。

來源

2012-11-02 18:22:06 srijan

它似乎並沒有解決它，但謝謝。 –

Jquery懸停隱藏/顯示：setTimeout clearTimeout

回答

相關問題