2

ドロップダウン メニューのマウスオーバー イベントに遅延を追加して、誰かがメニューの上にマウスを置いてページ上の別のリンクに移動しても、メニューがすぐにドロップダウンしないようにする必要があります。ご協力いただきありがとうございます。

http://jsfiddle.net/cgagliardi/NPVVQ/

4

3 に答える 3

4

を追加しsetTimeout()て遅延させることができますshow()。ホバーアウト時にタイムアウトをクリアして、遅延が発生する前にユーザーがマウスを移動した場合にキャンセルされるようにします。そして、それを独自のjQueryプラグインにカプセル化できます。

jQuery.fn.hoverWithDelay = function(inCallback,outCallback,delay) {
    this.each(function(i,el) {
        var timer;
        $(this).hover(function(){
           timer = setTimeout(function(){
              timer = null;
              inCallback.call(el);
           }, delay);
        },function() {
           if (timer) {
              clearTimeout(timer);
              timer = null;
           } else
              outCallback.call(el);
        });
    });
};

あなたはこのように使うことができます：

$('ul.top-level li').hoverWithDelay(function() {
    $(this).find('ul').show();
}, function() {
    $(this).find('ul').fadeOut('fast', closeMenuIfOut);
}, 500);

私は急いでそのプラグインを一緒に石畳にしたので、それは改善されると確信していますが、あなたのデモのこの更新されたバージョンで動作するようです：http: //jsfiddle.net/NPVVQ/3/

私のコードがどのように機能するかを説明する限り.each()、関数が呼び出されるjQueryオブジェクトのすべての要素をループします。要素ごとに、提供されたコールバック関数の呼び出しを遅らせるために使用するホバーハンドラーが作成されsetTimeout()ます。時間が経過する前にマウスリーブが発生した場合、このタイムアウトがクリアされ、inCallbackが呼び出されなくなります。この.call()メソッドは、に使用されinCallback、outCallbackの正しい値を設定しますthis。

于 2012-05-29T04:25:40.133 に答える
0

CSS3アニメーションまたはトランジションを使用できます。

http://www.css3maker.com/css3-animation.html

http://www.css3maker.com/css3-transition.html

または、Javascriptでタイムアウトを処理できます。簡単な方法は、setTimeoutbeforeをアタッチしてmouseleaveイベントshow();で使用することだと思います。clearTimeout

于 2012-05-29T04:11:51.257 に答える
0

コードを更新して、メニューが1/2 秒後に表示されるようになりました。 デモ

$('#navigation').show(2000);

これは、jqueryのshow()の ....ofアニメーションを遅らせるのに十分です。

別の div を使用して、表示できるアニメーションを一時停止しました。

于 2012-05-29T04:29:56.733 に答える