1

私は次のことをしようとしています：

私のページの下部に固定位置のdivがあります。マウスが出入りすると、divはその高さをアニメーション化して応答します。100pxと50px。デフォルトの高さは50pxです。

私は、Jqueryが1つの大きなノーノーでこれを正しく行うことを発見しました。アニメーション中にマウスが終了し、再びマウスが再び入ると、次のいずれかになります。

a）アニメーションをスタックして、多くの（たとえば、100）アニメーションを実行しますが、必要なアニメーションは1つだけです。

b）現在のアニメーションをリセットします。これにより、divが消えたり、固定の高さに変更されたりして、100〜50ピクセルの間でロックダウンまたはグリッチが発生するなどの予期しない動作が発生します。

これについて何かアイデアはありますか？

4

3 に答える 3

1

マウスオーバーイベントとマウスアウトイベントを処理するときは、stop（）関数を使用してアニメーションキューをクリアする必要があります。必要に応じて、アニメーションの最後（別のアニメーションを開始する前）にジャンプできます。アニメーションのキュー全体をクリアすることもできます。

jQuery APIドキュメントから：

.stop（）メソッドの有用性は、mouseenterとmouseleaveの要素をアニメーション化する必要がある場合に明らかです。

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>

チェーンに.stop（true、true）を追加することで、複数のキューに入れられたアニメーションの一般的な問題なしに、優れたフェード効果を作成できます。

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});
于 2010-06-28T15:29:30.727 に答える
0

すべてのアクションでアニメーションイベントを発生させるのではなく、特定の変数を常にポーリングし、それに応じて特定の（変数）量を移動するかどうかによって動作する関数を用意してはどうでしょうか。mouseoverその後、mouseoutイベントによってポーリングされる変数が変更されるため、何百ものアニメーションがトリガーされることを心配する必要はありません。わかりやすくするために、意味がわからない場合はお知らせください。

于 2010-06-28T15:29:36.653 に答える
0

これまでに機能することがわかった唯一の解決策は、アニメーション化する前に、mouseenterアニメーションとmouseexitアニメーションの両方にClearQueue（）を与えることですが、これは場合によっては望ましくない可能性があると思います。

animate（）を使用する場合、これは非常にうまく機能しますが、slideUpやその他のデフォルトのJQueryアニメーションでは、不適切な動作につながります。

于 2010-06-28T15:35:20.087 に答える