1

次のリンクには、アニメーション化されたホバー効果の例があります。特定のリストでマウスをホバーすると、ツールチップが表示されたり消えたりしますが、ここでは問題ありません。特定のリストでマウスを上下に動かし続けると、ツールチップが数回表示されます（たとえば、マウスを10回動かすと、ツールチップも10回表示されます）。

この問題を解決する方法（つまり、特定のリストに数回カーソルを合わせると、ツールチップが1回だけ表示されます）。

スクリプトを（stop（）関数を追加して）変更してみました

    $(".menu a").hover(function() {
    $(this).next("em").stop().animate({opacity: "show", top: "-75"}, "slow");

しかし、それは失敗しました...。

4

3 に答える 3

3

を使用.stop(true, true)してアニメーションを停止します。動作デモを確認してください。

$(document).ready(function(){
    $(".menu a").hover(function() {
        $(this).next("em").stop(true, true).animate({opacity: "show", top: "-75"}, "slow");
    }, function() {
        $(this).next("em").stop(true, true).animate({opacity: "hide", top: "-85"}, "fast");
    });
});

説明:

.stop(true, true)キューに入れられたアニメーションを削除し、現在のアニメーションをすぐに完了します。

.stop( [clearQueue] [, jumpToEnd] )

clearQueueキューに入れられたアニメーションも削除するかどうかを示すブール値。デフォルトは false です。

jumpToEnd現在のアニメーションをすぐに完了するかどうかを示すブール値。デフォルトは false です。

于 2012-08-14T10:02:19.497 に答える
0

ホバー イベントのみを指定できます。これは が発生するたびに発生しmouseenterます。「このホバーは、前のホバーが 5 秒前に東で発生した場合にのみ発生する必要があります」などを指定することはできません。Hoverintentプラグインを使用して、マウスが 0.5 秒間内部にある場合にのみホバーが起動するように指定できます。

于 2012-08-14T10:01:57.203 に答える
0

ツールチップを 1 回表示するには、$(".menu li").hover を使用します。

于 2012-08-14T09:57:56.520 に答える