すべてキャンセル待ちjQuery slideUpは、slideDownアニメ

StackOverflow https://stackoverflow.com/questions/2360209

質問

私はインターフェースではjQuery slideUpは、slideDown効果の拡大にトライ状態になる。

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

ただし、ユーザーを迅速に動きをマウスでこれらのインタフェース要素をアニメについていけないの摺動上下に長い時間が経過した後、マウス左のです。

があるので、すべてキャンセルにはキュープランの場合は、マウス葉の商品の容器事業部?

役に立ちましたか？

解決

私はあなただけ.stopを（）を追加することができるはずと信じて、それはあなたのためにそれの世話をします。

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

他のヒント

あなたが本当にしたいの答えは、他のすべての3件の回答の組み合わせです。

$("...").hover(function() {
  $(this).stop(true, true).slideDown();
}, function() {
  $(this).stop(true, true).slideUp();
});
これらは、保留中のアニメーションキューをクリアするため、

あなたは、停止中truesをしたいです。あなたはこれらを使用していけない場合、あなたはバグが結果を生む要素間で迅速かつ繰り返し、マウスを動かす見つけることができます。

一般的に呼び出したい話す stop() に、このようなアニメーションを開始するときます：

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

これは、長時間実行されるアニメーションキューを回避するのに十分でなければなりません。

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

また、あなたがmouseover()上でこれらを設定している場合、単に mouseout() hover() >代わりにイベントます。

それはちょうどこのように、あなたはstop()でパラメータを置けばはるかに良いもです：stop(true,true) ...

私の場合、私はまた、最大かつ広範なアニメーションキューダウン.stop()ソリューションを探していました。しかし、それは滑らかされなかったため、それはまだ、解決しなかった、それはそれはもう下にスライドしないようになって、バギーだっます。

そこで、私はキューをキャンセルするために関連していない溶液で来たが、それはあなたのいくつかを助けるかもしれません。解決策は、アニメーションのターゲットが現在アニメーションされていないときにちょうどそれを下にスライドするかについてです。

$("#trigger").on({
    mouseover: function() {
        $("#animationTarget").not(":animated").slideDown();
    },
    mouseleave: function() {
        $("#animationTarget").not(":animated").slideUp();
    }
});

なにができるのは、次のようなもの: 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;
}
所属していません StackOverflow
scroll top