jQueryの遅延CSSのdivの位置

StackOverflow https://stackoverflow.com/questions/910080

  •  05-09-2019
  •  | 
  •  

質問

私は私のメニューバーは、部分的に非アクティブの約5秒のタイムアウト後に非表示にしようとしています。メニューは、ページの一番上から20ピクセルを配置し、基本的な考え方は、それが再び落下するため、ユーザは、この上にカーソルを移動できるようにするために上に移動した後、メニューの小さな部分がまだ表示されることである（うまくいけば、これは作るれます感覚！）。

私は、アニメーション側ではなく、かなりのタイムアウトを管理しています。 任意のアイデア？

役に立ちましたか？

解決

残念ながら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...
});

他のヒント

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

これは、ユーザーがメニューとの相互作用を停止した後の行動に遅延を行うことが非常に簡単になります。

あなたはこのような機能を実装するためにメニューを表すmouseoutのdivイベントを使用する必要があります：

var waitingForMenuToHide = false;

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

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

function myMouseOver() {
    waitingForMenuToHide = false;
}

マウスアウトイベントに要素をスクロールアップするためにコールバックして、タイムアウトを開始します。タイムアウトがある場合はmousoverイベントでは、使用してそれを殺すます：

clearTimeout(timer);

それはのようなものになりますのでます：

var timer;
$('mybar').mouseover(function(){clearTimeout(timer);/* Animate down code here */});
$('mybar').mouseout(function(){timer=setTimeout(function(){/* Animate up Code Here */}, 5000);});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top