Cancelar todas las animaciones jQuery slideUp y slideDown en cola

Question

Tengo una interfaz que hace un uso intensivo del efecto jQuery slideUp y slideDown para expandir los elementos en una especie de modo tri-state.

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

Sin embargo, cuando el usuario se mueve rápidamente el puntero del ratón sobre estos elementos de interfaz de las animaciones no pueden seguir el ritmo y los artículos serán deslizante hacia arriba y abajo mucho después de que el ratón ha salido de la zona de interfase.

¿Hay alguna manera de cancelar todas las animaciones de diapositivas en cola cuando el mouse deja el div del contenedor del elemento?

Answer 1

Creo que usted debería ser capaz de simplemente añadir un .Stop() y me encargo de eso para usted:

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

Answer 2

En términos generales al que desea llamar stop() al iniciar una animación como:

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

Eso debería ser suficiente para evitar colas de animación de larga ejecución.

También puede usar $.clearQueue() para borrar globalmente animaciones que aún no han comenzado.

Además, si configura estos en mouseover() y mouseout(), es más claro que simplemente usar el evento hover() en su lugar.

Answer 3

También es mucho mejor si se pone en stop() parámetros, al igual que este: stop(true,true) ...

Answer 4

La respuesta que realmente quiere es una combinación de todas las otras tres respuestas.

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

desea que el true s en la parada debido a que estos clara las colas de espera de animación. Si no los usa, verá que mover el mouse rápidamente y repetidamente a través del elemento producirá resultados erróneos.

Answer 5

En mi caso, yo también estaba buscando una solución .stop() para la cola de animación extensa hacia arriba y hacia abajo. Sin embargo, todavía no resolvió, porque no era fácil, y tenía errores, por lo que no se desliza hacia abajo nunca más.

Por lo tanto, vine con una solución que no está relacionada con la cancelación de colas, pero podría ayudar a algunos de ustedes. La solución consiste en deslizar hacia abajo o hacia arriba justo cuando el objetivo de la animación no está siendo animado actualmente.

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

Answer 6

que podría hacer algo como lo siguiente: 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

consulta similar fue publicada en this hilo. Usando

stop (verdadero, falso)

puede lograr el efecto sin errores.

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

he asumido que hay un elemento después de #YourDiv que usted quiere poner deslizable hacia arriba y hacia abajo animaciones de diapositivas.

Esto saltará a la animación del último evento y borrará todos los eventos pendientes en la cadena.