2

私はの初心者jQueryです。私はこのコードを持っています.Hereはfiddleのリンクです。#flipここでは、ホバーするとスライドダウンし、マウスを離すとスライドダウンすることがわかります。この時点から、正常に動作します。しかしhoverIntent、誰かがそれをホバーして外に出しても、スライドが自動的に実行されないようにする必要があります。私のjQueryコードは次のようになります

<script> 
$(document).ready(function(){
  $("#flip").hover(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
4

3 に答える 3

1

stop現在実行中のアニメーションを停止するために追加します。

$(document).ready(function(){
  $("#flip").hover(function(){
    $("#panel").stop(true, true).slideToggle("slow");
  });
});

最初のパラメータはキューに入れられたアニメーションを削除するために使用され、2 番目のパラメータは現在のアニメーションをすぐに完了するために使用されます。

ドキュメントを確認する

更新されたデモ: http://jsfiddle.net/Rqq6c/1/

于 2013-04-06T06:29:20.923 に答える
0

ユーザーが要素の上にマウスを置いて移動するだけの場合、スライドはトリガーされず、
フラストレーションを防ぎます:)マウスがまだ上にあるかどうか
を表示する前に300ミリ秒待機します。#panel#flip

データ属性を使用し たホバー インテント

LIVE DEMO

var $panel = $('#panel');

$("#flip").on('mouseenter mouseleave', function( e ) {
    return e.type=="mouseenter" ? panelOn() : panelOff() ;
});

function panelOn() {    
   $panel.data('wait', setTimeout(function(){
       $panel.stop().slideDown(600);
   },300) );
}

function panelOff() {
    clearTimeout( $panel.data('wait') );
    $panel.stop().slideUp(600); 
}

#panelさらに、ホバーしたときに開いたままにしたい場合は、
両方の要素に親要素を追加し、トリガー要素セレクターをその ID に変更します。

于 2013-04-06T06:42:53.943 に答える
0

コンテンツをコンテナー要素でラップし、代わりにホバー イベントをそれに添付します。そうすれば、どちらの要素にもカーソルを合わせるのをやめることはありません。

HTML

<div id="container">
  <div id="flip">Hover on panel to slide the panel down or up</div>
  <div id="panel">Hello world!</div>
</div>

Javascript

$(document).ready(function(){
  $("#container").hover(function(){
    $("#panel").slideToggle("slow");
  });
});

更新されたjsFiddle デモを見る

于 2013-04-06T06:31:53.777 に答える