要素にホバー効果を最後に限定する

Question

私のペンには：http://codepen.io/explicit_concept/pen/BLgoVG .icon要素のスケール/背景色の変更を引き起こすスクリプトがあります。デバイス全体の最初のホバーでのみです。ホバーでトリガーされる効果を作り出す方法例えばわずか3秒間続く？

doTimeout jQueryプラグインによって行われたことがわかりましたが、学習のためにゼロから作成したいと考えています。

クラスに要素を追加するときにホバーするとsetTimeoutを実行する必要があります。次に、.addClassを元に戻すためにタイマーが終了したら？

これは、ホバーのためのjQueryのコードです：

あなた mouseenterリスナーで

$(document).ready(function() { 
$('.device').one('mouseenter',function() { 
    $(this).find('.icon').addClass('icon-hovered'); 
    }); 
$('.device').mouseleave(function() { 
    $('.icon').removeClass('icon-hovered'); 
    }); 

Answer 1

setTimeout(() => { 
    $(this).find(".icon").removeClass("icon-hovered") 
}, 3000); // time in milliseconds 

は動作します。

Answer 2

jsFiddle：mouseleaveイベントでhttps://jsfiddle.net/wxmc3qks/1/

ちょうどjavascript関数setTimeoutを使用しています。 jQuery delay関数は、アニメーション遅延のみのための関数であり、関数はありません。

$(function() { 
    $('.button').on('mouseenter', function() { 
    $(this).addClass('hovered'); 
    }); 

    $('.button').on('mouseleave', function() { 
    var $this = $(this); 
    setTimeout(function() { 
     $this.removeClass('hovered'); 
    }, 3000); 
    }); 
});