1

非アクティブ状態が約 5 秒間タイムアウトした後、メニュー バーを部分的に非表示にしようとしています。メニューはページの上部から 20px の位置にあり、基本的な考え方は、メニューが上に移動した後もメニューの小さなセクションが表示され、ユーザーがこれにカーソルを合わせて再びドロップダウンできるようにすることです (うまくいけば、これにより検出！）。

私はアニメーション側を管理しましたが、タイムアウトではありません。何か案は？

4

4 に答える 4

2

mouseoutメニューを表す のイベントを使用して、div次のような関数を実装する必要があります。

var waitingForMenuToHide = false;

function myOnMouseOut() {
    waitingForMenuToHide = true;
    setTimeout(function() {
        if (waitingForMenuToHide) {
            // Hide the menu div...
        }
    }, 5000);
}

変数をリセットするmouseoverイベント:waitingForMenuToHide

function myMouseOver() {
    waitingForMenuToHide = false;
}
于 2009-05-26T10:59:57.677 に答える
2

残念ながら、jQuery には遅延機能がありません。ただし、要素の不透明度を 1 から 1 にアニメーション化することにより、遅延をシミュレートするために卑劣であまり汚れていないハックを使用できます。

$('#visibleElement')               // Assuming the element is already shown
  .animate({opacity: 1.0}, 3000);  // do nothing for 3 seconds

マウスが離れてから 5 秒後にメニューを上にスライドするには、次のようにします。

$('#menuDiv').mouseout(function(){
  .animate({opacity: 1.0}, 5000)
  .animate( slide up etc...
});
于 2009-05-26T11:00:53.430 に答える
2

HoverIntent を見てみてください。 http://cherne.net/brian/resources/jquery.hoverIntent.html

これにより、ユーザーがメニューとの対話を停止した後、遅延してアクションを実行することが非常に簡単になります。

于 2009-05-26T11:01:15.537 に答える
1

mouseout イベントで、要素を上にスクロールするためのコールバックでタイムアウトを開始します。マウスオーバー イベントでタイムアウトが発生した場合は、次のコマンドを使用して強制終了します。

clearTimeout(timer);

したがって、次のようになります。

var timer;
$('mybar').mouseover(function(){clearTimeout(timer);/* Animate down code here */});
$('mybar').mouseout(function(){timer=setTimeout(function(){/* Animate up Code Here */}, 5000);});
于 2009-05-26T11:28:47.197 に答える