延迟添加类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"); 

应该做的伎俩。