Cancel all queued jQuery slideUp and slideDown animations

Question

I have an interface that makes heavy use of the jQuery slideUp and slideDown effect to expand items in a tri-state kind of way.

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

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.

Is there a way to cancel all the queued-up slide animations when the mouse leaves the item's container div?

Answer 1

I believe you should be able to just add a .stop() and it'll take care of that for you:

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

Answer 2

버튼에 현재 CSS를 표시 할 수 있습니까?나는 이것이 인터넷 익스플로러에서 당신을 위해 문제를 해결할 것이라고 생각합니다.

a.button:active, a.button:selected, a.button:visited { 
    border: none;
    outline: none;
}

.

Answer 3

Generally speaking you want to call stop() when starting such an animation:

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

That should be sufficient to avoid long-running animation queues.

You can also use $.clearQueue() to globally clear animations that haven't yet begun.

Also, if you're setting these on mouseover() and mouseout() it is arguably clearer to simply use the hover() event instead.

Answer 4

It is also much better if you put parameters in stop(), just like this: stop(true,true)...

Answer 5

QTYinStock가 Stocktable에서 하나 이상의 레코드와 일치하는 것으로 의심합니다.Stock 테이블에는 각 레코드를 고유하게 식별 할 수 있도록 정수 값이 자동 증가 할 수있는 기본 키 설정이 있어야합니다.

대신 :

업데이트 재고 세트 qty_in_stock= @qty_in_stock, cartridge_code= @Cartridge_code 여기서 qty_in_stock= ' "+ qtyinstock +" "

다음을 사용할 것입니다 :

UPDATE Stock SET QTY_in_Stock = @QTY_in_Stock, Cartridge_Code = @Cartridge_Code WHERE StockID = " + stockID

.

STOCKID는 변수에 보유 된 고유 한 행 식별자입니다.레코드를로드 할 때이 값을 언젠가는이 값을 퇴실해야합니다.@QTY_IN_STOCK 및 @CARTRIDGE_CODE 값과 마찬가지로 PARAMTRER에서 변수를 만들어야합니다.

Answer 6

You could do something like the following: 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;
}

Answer 7

Similar query was posted in this thread. Using

stop(true, false)

you can achieve the effect without bugs.

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

I've assumed that there is an element after #YourDiv that you want to put slide-up and slide-down animations.

This will jump to the animation of the last event and clear all the pending events in the chain.