ホバー（）で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"); 
    } 
); 

をあなたの要素。

修正：jsFiddleで溶液の実際の例を作成しまし

$("#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"); 
    } 
); 

。

Answer 2

setTimeout方法は、あなたがミリ秒で設定された遅延の後に指定したコードを実行するために使用することができます。

この試してみてください：あなたがここでの問題は、あなたがマウスをマウスオーバーし、2秒前にあれば、あなたはまだ上のクラスdoorstaticを持っているということですremoveClass("door doorstatic")

のようなグループにクラスをすることができます

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"); 

よう

何かがトリックを行う必要があります。