javascript - タイミング付きのjQueryマウスオーバー

Question

マウスが要素上で 1 秒間ホバリングした後にのみ、マウスオーバー イベントをトリガーする方法はありますか?

$("img").mouseover(function () {

 $(this).animate( {opacity:1}, 200);

});

Answer 1

http://jsfiddle.net/tqa2J/1/

$("img").on("mouseover mouseout", function() {
    var tid = 0;
    return function(e) {
        var elem = $(this);
        clearTimeout(tid);
        if (e.type == "mouseover") {
            tid = setTimeout(function() {
                elem.stop(true).animate({
                    opacity: 1
                }, 200);
            }, 1000);
        }
        else {
            console.log(elem);
            elem.stop(true).animate({
                opacity: 0.3
            }, 200);
        }

    };
}());​

Answer 2

ここにある hoverIntent() jQuery プラグインを使用できます: http://cherne.net/brian/resources/jquery.hoverIntent.html

また、モバイルブラウザやタッチスクリーンを使用するものでは機能しないため、これらの種類のものを使用するときは注意してください.

Answer 3

$("img").mouseover(function () {
    $(this).delay(1000).animate( {opacity:1}, 200);
}).mouseleave(function() {
    $(this).clearQueue().stop().animate({opacity:0.2},200);
});​

デモ

Answer 4

setTimeOut 関数を使用する必要があります。

setTimeOut(function(){$("img").mouseover(function () {

        $(this).animate( {opacity:1}, 200);

});
},1000);

ミリ秒単位で時間がかかります。

Answer 5

イベントを 1 秒後に処理するタイマー関数 ([1] を参照) を作成できます。その関数を配列に格納するか、「ウィンドウ」に直接格納して、タイマー関数がトリガーされる前に「マウスアウト」が発生した場合にキャンセルできるようにすることができます。

[1] http://www.w3schools.com/js/js_timing.asp