延遲添加類2秒懸停（）

Question

如何使用緩解或addClass();時間延遲？

$("#date_1").hover(
    function() { 
     $(this).addClass("door"); 
     $(this).addClass("doorstatic", "slow"); // after 2seconds i want to add this class during the hover 
    }, 
    function() { 
     $(this).removeClass("door"); 
     $(this).removeClass("doorstatic"); // both classes are instantly removed when hover off 
    } 
); 

Answer 1

$("#date_1").hover( 
    function() { 
     var $this = $(this); 

     $this.addClass("door"); 
     setTimeout(function() { 
      $this.addClass("doorstatic"); 
     }, 2000); // 2000 is in mil sec eq to 2 sec. 
    }, 
    function() { 
     $(this).removeClass("door doorstatic"); 
    } 
); 

您可以將您的類，如removeClass("door doorstatic")

這裏的問題是，如果你鼠標懸停和前2秒鐘的鼠標你依然會對類doorstatic你的元素。

的修復：

$("#date_1").hover( 
    function() { 
     var $this = $(this), 
      timer = $this.data("timer") || 0; 

     clearTimeout(timer); 
     $this.addClass("door"); 

     timer = setTimeout(function() { 
      $this.addClass("doorstatic"); 
     }, 2000); // 2000 is in mil sec eq to 2 sec. 

     $this.data("timer", timer); 
    }, 
    function() { 
     var $this = $(this), 
      timer = $this.data("timer") || 0; 

     clearTimeout(timer); 
     $this.removeClass("door doorstatic"); 
    } 
); 

創建在jsFiddle溶液的實況實例。

Answer 2

javascript的setTimeout方法可用於運行您在指定延遲毫秒後指定的代碼。

試試這個：

var timeout; 
$("#date_1").hover(
    function() { 
     $(this).addClass("door"); 
     timeout = setTimeout(function() { $(this).addClass("doorstatic"); }, 2000); 
    }, function() { 
     clearTimeout(timeout); 
     $(this).removeClass("door doorstatic"); 
    } 
); 

Answer 3

其實你可以追加到jQuery's delay打電話給你addClass電話。

喜歡的東西

$(this).addClass("door").delay(2000).addClass("doorstatic", "slow"); 

應該做的伎倆。