19

jQueryのslideUpおよびslideDownエフェクトを多用して、トライステートのような方法でアイテムを展開するインターフェイスがあります。

onmouseover: function() { 
this.find('.details', this).slideDown(); 
},
onmouseout: function() { 
this.find('.details', this).slideUp(); 
}

ただし、ユーザーがこれらのインターフェイス要素上でマウスをすばやく動かすと、アニメーションが維持できなくなり、マウスがインターフェイス領域を離れた後も、アイテムが上下にスライドします。

マウスがアイテムのコンテナdivを離れたときに、キューに入れられたすべてのスライドアニメーションをキャンセルする方法はありますか？

4

7 に答える 7

32

.stop（）を追加するだけで、それが自動的に処理されるはずです。

onmouseover: function() { 
this.find('.details', this).stop().slideDown(); 
},
onmouseout: function() { 
this.find('.details', this).stop().slideUp(); 
}
于 2010-03-02T00:57:24.997 に答える
21

あなたが本当に望む答えは、他の3つの答えすべての組み合わせです。

$("...").hover(function() {
  $(this).stop(true, true).slideDown();
}, function() {
  $(this).stop(true, true).slideUp();
});

これらは保留中のアニメーションキューをクリアするため、truesを停止する必要があります。これらを使用しない場合は、要素全体でマウスをすばやく繰り返し動かすと、バグのある結果が生成されることがわかります。

于 2011-07-21T20:03:41.333 に答える
8

stop()一般的に言って、そのようなアニメーションを開始するときに電話をかけたいと思います。

$("...").hover(function() {
  $(this).stop().slideDown();
}, function() {
  $(this).stop().slideUp();
});

長時間実行されるアニメーションキューを回避するには、これで十分です。

$.clearQueue()まだ開始されていないアニメーションをグローバルにクリアするために使用することもできます。

また、これらをオンに設定してmouseover()いて、代わりにイベントをmouseout()使用する方が間違いなく明確である場合。hover()

于 2010-03-02T01:04:40.313 に答える
6

stop()次のように、パラメータを入れた方がはるかに優れていますstop(true,true)。

于 2010-07-27T08:42:38.887 に答える
4

.stop()私の場合、上下の広範なアニメーションキューの解決策も探していました。しかし、それはスムーズではなく、バグがあり、もはや滑り落ちないため、それでも解決しませんでした。

したがって、私はキューのキャンセルとは関係のない解決策を思いつきましたが、それはあなたの何人かを助けるかもしれません。解決策は、アニメーションターゲットが現在アニメーション化されていないときに、それを上下にスライドさせることです。

$("#trigger").on({
    mouseover: function() {
        $("#animationTarget").not(":animated").slideDown();
    },
    mouseleave: function() {
        $("#animationTarget").not(":animated").slideUp();
    }
});
于 2014-04-09T18:19:09.560 に答える
1

次のようなことができます：http：//jsfiddle.net/3o2bsxo6/3/

JavaScript

$('h5').each(function(){
    $(this).unbind('mouseover'); //unbind previous events (prevent repeats)
    $(this).unbind('mouseout');

    $(this).on('mouseover',function(){
        if(!$(this).next('.details').is(':visible')){ //if not visible
             $(this).next('.details').slideDown();   //slidedown                        
        }
    })  
    $(this).on('mouseout',function(){
        if($(this).next('.details').is(':visible')){ //if visible
             $(this).next('.details').slideUp();    //slideup                           
        }
    })      
})

html：

<h5>Hover To Slide</h5>
<p class="details">
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.    
</p>
<h5>Hover To Slide</h5>
<p class="details">
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.    
</p>
<h5>Hover To Slide</h5>
<p>
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.    
</p>

CSS：

p{
    display:none;
}
于 2015-04-17T18:45:56.990 に答える
0

同様のクエリがこのスレッドに投稿されました。使用する

stop（true、false）
あなたはバグなしで効果を達成することができます。

$('#YourDiv').on('mouseenter', function(){
   $(this).next().slideDown(250).stop(true, false).slideDown()  
});

#YourDivの後に、スライドアップアニメーションとスライドダウンアニメーションを配置する要素があると想定しました。

これにより、最後のイベントのアニメーションにジャンプし、チェーン内の保留中のすべてのイベントがクリアされます。

于 2015-11-14T06:28:13.317 に答える