94

jqueryでホバーイベントを遅らせたいです。ユーザーがリンクまたはラベルにカーソルを合わせると、ファイルから読み取っています。ユーザーが画面上でマウスを動かしているだけの場合に、このイベントをすぐに発生させたくありません。イベントの発火を遅らせる方法はありますか?

ありがとうございました。

コード例:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

更新: (2009 年 1 月 14 日) HoverIntent プラグインを追加した後、上記のコードはそれを実装するために次のように変更されました。実装は非常に簡単です。

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}
4

6 に答える 6

92

jquery用のhoverIntentプラグインを使用します：http：//cherne.net/brian/resources/jquery.hoverIntent.html

それはあなたが説明するものに絶対に完璧であり、私はメニューなどのマウスオーバーアクティベーションを必要とするほぼすべてのプロジェクトでそれを使用しました...

このアプローチには1つの落とし穴があります。たとえば、一部のインターフェイスには「ホバー」状態がありません。iPhoneのサファリのようなモバイルブラウザ。インターフェイスやナビゲーションの重要な部分を非表示にしていて、そのようなデバイスで開く方法がない場合があります。これは、デバイス固有のCSSで回避できます。

于 2009-01-12T15:31:16.167 に答える
50

ホバー時にタイマーをチェックする必要があります。存在しない場合（つまり、これが最初のホバーである場合）、作成します。存在する場合（つまり、これが最初のホバーではない場合）、それを強制終了して再起動します。タイマーペイロードをコードに設定します。

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

jQueryには、これをすべてまとめる関数があるに違いありません。

編集：ああ、はい、jQueryプラグインが救助に

于 2009-01-12T15:40:28.190 に答える
11

hoverIntent が最善の解決策であることに完全に同意しますが、jQuery プラグインの承認プロセスが長くて長引く Web サイトで作業する不運な人に遭遇した場合は、私にとってはうまくいった迅速で汚い解決策を次に示します。

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

これは、マウスが 300 ミリ秒以上上にある場合に <li> を展開するためのものです。

于 2011-12-08T14:25:42.770 に答える
6

mouseoutイベントでclearTimeout（）を指定してsetTimeout（）呼び出しを使用できます。

于 2009-01-12T15:32:21.077 に答える
-2

私の解決策は簡単です。ユーザーが 300 ミリ秒以上 obj で mouseenter を保持している場合、メニューを開くのを遅らせます:

var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});
于 2011-09-02T10:37:23.827 に答える