1

マウスオーバーイベントがあるときはいつでもdivをスライドさせ、マウスアウトイベントがあるときはスライドさせて戻します(非表示)。マウス アウトとマウス オーバーが速すぎると、div が振動し続けます。この問題を解決するにはどうすればよいですか?

 $(document).ready(function() {
   $("#in").ready(function(){    
     $("#out").mouseover(function () {
       $("#in").animate({"height":"toggle",},200);
     });
   });
   $("#in").ready(function(){    
     $("#out").mouseout(function () {
       $("#in").animate({"height":"toggle",},200);
     });
   });
 });

<div id="out"><img src="pics/1.gif" ><div id="in"><h1>Google</h1></div></div>
4

2 に答える 2

3

メソッドを使用できますstop()：

一致した要素で現在実行中のアニメーションを停止します。

$("#out").mouseover(function () {
     $("#in").stop(true, true).animate({"height":"toggle"},200);
});
于 2012-07-14T21:09:44.723 に答える
2

まず、私とラミンソンのアドバイスに従ってください。このstop()関数は、指定された要素で現在実行中のすべてのアニメーションを停止し、表示されていた動作を防ぎます。

あなたが投稿したコードについて、さらに2つのことが言えます。

  1. 関数に指定したパラメーターの末尾にコンマがあります.animate()。 {"height":"toggle",}. これは Chrome と Firefox で動作する可能性がありますが、IE では動作しない可能性が高く、動作していない場所や理由がわからない可能性があります。JavaScript では、配列やオブジェクトの末尾にカンマを付けるべきではありません....

  2. jQuery 呼び出しをドキュメントの準備ができたハンドラーでラップしましたが (必要に応じて)、各要素の別の準備ができたハンドラー内でコードをラップしました。$("#in").ready()... $("#out").ready(). これは不要です。DOM と jQuery がロードされていることを確認するために必要な関数は 1 つだけです。

于 2012-07-14T21:20:02.200 に答える