Alle jQuery slideUp- und slideDown-Animationen in der Warteschlange abbrechen

Question

Ich habe eine Schnittstelle, die den jQuery-slideUp-Effekt und den slideDown-Effekt nutzt, um Elemente auf tri-state-Weise zu erweitern.

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

Wenn jedoch der Benutzer schnell die Maus über diese Schnittstellenelemente bewegt die Animationen nicht mithalten kann und die Einzelteile werden Schiebetüren oben und unten, lange nachdem die Maus, um den Schnittstellenbereich verlassen hat.

Gibt es eine Möglichkeit, alle in der Warteschlange befindlichen Folienanimationen abzubrechen, wenn die Maus das Container-div des Objekts verlässt?

Answer 1

Ich glaube, Sie sollten in der Lage sein, nur ein .stop() hinzufügen und es wird für Sie darum kümmern:

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

Answer 2

Generell Sie wollen stop() rufen, wenn eine solche Animation starten:

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

Das sollte ausreichen, um lange laufende Animationswarteschlangen zu vermeiden.

Sie können auch $.clearQueue() verwenden, um Animationen, die noch nicht begonnen haben, global zu löschen.

Auch wenn Sie diese auf mouseover() und mouseout() setzen, ist es wohl klarer, einfach das Ereignis hover() stattdessen zu verwenden.

Answer 3

Es ist auch viel besser, wenn man Parameter in stop(), genau so: stop(true,true) ...

Answer 4

Die Antwort, die Sie wirklich wollen, eine Kombination aus all den anderen drei Antworten ist.

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

Sie mögen die true s im Anschlag, da diese die anstehende Animation Warteschlangen klar. Wenn Sie diese nicht verwenden, werden Sie feststellen, dass das Bewegen der Maus schnell und wiederholt über das Element hinweg zu fehlerhaften Ergebnissen führt.

Answer 5

In meinem Fall war ich auch für eine .stop() Lösung für die oben und unten umfangreiche Animationswarteschlange suchen. Aber es hat immer noch nicht gelöst, weil es nicht glatt war, und es war fehlerhaft, so dass es nicht mehr nach unten rutschte.

Daher kam ich mit einer Lösung, die nicht mit Cancel-Warteschlangen verbunden ist, aber es könnte einige von Ihnen helfen. Die Lösung besteht darin, es nach unten oder oben zu schieben, wenn das Animationsziel gerade nicht animiert wird.

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

Answer 6

Sie könnten etwas tun, wie folgt aus: 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

ähnliche Anfrage wurde in this Thread gepostet. Mit

stoppen (wahr, falsch)

Sie können den Effekt ohne Fehler erreichen.

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

Ich bin davon ausgegangen, dass es ein Element nach #YourDiv, die Sie wollen Slide-Up setzen und slide-down-Animationen.

Dies springt zur Animation des letzten Ereignisses und löscht alle ausstehenden Ereignisse in der Kette.