0

私は現在、ユーザーにさらに情報を表示するためにカーソルを合わせると展開する、ある種のラベルを作成しようとしています。私が抱えている問題は、ユーザーがアイテムをすばやく複数回ホバーすると、イベントキューが蓄積され、アニメーションが複数回発生することです。

ユーザーがラベルにカーソルを合わせると、ラベル情報が再び非表示になるまで、ホバーイベントが何らかの理由で無効になります。私は使ってみまし.stop()たevent.stopPropagation()が、どちらも望ましい効果はありませんでした。他に何かアイデアはありますか？

私のコードは以下のとおりです。

$('.label').mouseenter(function(){
    $('.label-info').slideDown('slow');
});

$('.label').mouseleave(function(){
    $('.label-info').slideUp('slow');
})
4

2 に答える 2

2

使用.stop()：

http://api.jquery.com/stop/

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

したがって、コードは次のようになります。

$('.label')
.mouseenter(function(){
    $('.label-info').stop(1,1).slideDown('slow');
})
.mouseleave(function(){
    $('.label-info').stop(1,1).slideUp('slow');
})

IE 7以下を対象としている場合は、クラスセレクターのみを使用することは賢明ではないことに注意してください。

于 2012-06-06T08:48:56.167 に答える
0

私はこの問題に数回遭遇し、それを回避するためのさまざまな方法を考え出しました。この問題を取り除くためにあなたが取ることができる2つのアプローチがここにあります。

オプション1：アニメーション要素のフィルタリング

:animatedとの組み合わせを使用すると.filter、アニメーションがすでにアニメーションの途中である場合に、アニメーションが実行されないようにすることができます。これは、下にスライドする前に、完全に上にスライドすることを意味します。

$('.label').mouseenter(function()
{
    $('.label-info').filter(':animated').slideDown('slow');
}).mouseleave(function()
{
    $('.label-info').filter(':animated').slideUp('slow');
})

オプション2- hoverIntentプラグイン

hoverIntentは、ホバーイベントをトリガーする前に短い遅延を追加することで、要素の偶発的なマウスオーバーを防ぐのに役立つ小さなjQueryプラグインです。これは、この問題の解決に役立つだけでなく、高度にインタラクティブなDOM要素がある場合にも非常に便利なプラグインです。

于 2012-06-06T08:55:23.160 に答える