Annulla tutte le animazioni jQuery slideUp e slideDown in coda

Question

Ho un'interfaccia che fa uso pesante dell'effetto jQuery slideUp e slideDown per espandere elementi in una sorta tre stati del percorso.

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

Tuttavia, quando l'utente si muove rapidamente il mouse su questi elementi dell'interfaccia le animazioni non possono tenere il passo e gli articoli si scivola su e giù per molto tempo dopo che il mouse ha lasciato l'area di interfaccia.

C'è un modo per annullare tutte le animazioni di diapositive in coda-up quando le foglie del mouse dell'elemento div contenitore?

Answer 1

Credo che si dovrebbe essere in grado di aggiungere solo un .Stop () e prenderò cura di questo per voi:

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

Answer 2

La risposta che si vuole veramente è una combinazione di tutti gli altri tre risposte.

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

Si desidera i trues in arresto perché questi cancellare le code di animazione in sospeso. Se non usate questi, troverete spostando il mouse rapidamente e ripetutamente attraverso l'elemento produrrà risultati buggy.

Answer 3

In linea generale si desidera chiamare stop() quando si inizia una tale animazione:

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

Questo dovrebbe essere sufficiente per evitare a lungo in esecuzione le code di animazione.

È inoltre possibile utilizzare $.clearQueue() a livello globale le animazioni chiare che non hanno ancora iniziato.

Inoltre, se si sta impostando questi su mouseover() e mouseout() è probabilmente più chiara di utilizzare semplicemente il hover() evento, invece.

Answer 4

E 'anche molto meglio se si mette i parametri in stop(), proprio come questo: stop(true,true) ...

Answer 5

Nel mio caso, mi è stato anche alla ricerca di una soluzione .stop() per il su e giù ampia coda di animazione. Tuttavia, ancora non ha risolto, perché non era liscia, ed era pieno di bug, rendendo non più di scivolare verso il basso.

Quindi, sono venuto con una soluzione che non è legato ad annullare le code, ma potrebbe aiutare alcuni di voi. La soluzione è di circa scorrere verso il basso o verso l'alto solo quando il bersaglio animazione non è attualmente in corso di animazione.

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

Answer 6

Si potrebbe fare qualcosa di simile al seguente: 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

query simile è stato pubblicato in questa discussione . utilizzando

arresto (vero, falso)

è possibile ottenere l'effetto senza bug.

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

ho assunto che c'è un elemento dopo la #YourDiv che si desidera mettere le animazioni slide-up e scivolare verso il basso.

Questa salterà l'animazione dell'ultimo evento e cancellare tutti gli eventi in corso nella catena.