javascript - left - Cancelar todas las animaciones jQuery slideUp y slideDown en cola

slidetoggle is not a function

Question

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

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

Sin embargo, cuando el usuario mueve rápidamente el mouse sobre estos elementos de interfaz, las animaciones no pueden mantener el ritmo y los elementos se deslizarán hacia arriba y hacia abajo mucho después de que el mouse haya salido del área de la interfaz.

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

Answer 1

Creo que deberías poder agregar un .stop () y se encargará de eso por ti:

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

Answer 2

En general, desea llamar a stop() al iniciar dicha animación:

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

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

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

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

Answer 3

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

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

Desea que las true s se detengan porque borran las colas de animación pendientes. Si no los usa, verá que mover el mouse rápidamente y repetidamente a través del elemento producirá resultados erróneos.

Answer 4

En mi caso, 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 5

También es mucho mejor si pone parámetros en stop() , así como: stop(true,true) ...

Answer 6

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 este hilo. Utilizando

detener (verdadero, falso)

puedes lograr el efecto sin errores.

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

Supuse que después de #YourDiv hay un elemento al que desea agregar animaciones deslizables y deslizables hacia abajo.

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