Fermandosi una funzione jquery di agire più volte
Domanda
Ho un effetto di dissolvenza a ginocchiera, ma quando si fa clic sul pulsante più volte svanisce dentro e fuori più di una volta. (Quindi, se clicco la dissolvenza id 20 volte veloce svanirà dentro e fuori più volte) Come faccio a fermare questo e fare in modo che si può passare solo la dissolvenza quando l'animazione è stata fatta? Ho cercato di ottenere il valore corrente e fare un'istruzione if, ma non ha funzionato: * (
Grazie
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(document).ready(function() {
$('.open').click(function() {
$('#fadeMe').next().fadeToggle('slow');
});
});
Soluzione
È necessario verificare se l'elemento non è: animato, in caso affermativo invocare il .animate:
<body>
<button class="open">open</button><br>
<div id="fadeMe">fade me!</div>
<style>#fadeMe {
width:20em;
height:10em;
background:black;
color:#fff;
}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(document).ready(function() {
$('.open').click(function() {
var el = $('#fadeMe').next();
if ( !el.is(':animated') ) {
$(el).fadeToggle('slow');
}
});
});
</script>
</body>
Demo: http://jsbin.com/irare
Altri suggerimenti
Usa .stop()
. Ciò arresta tutte le animazioni su un elemento.
$('#fadeMe').next().stop().fadeToggle('slow');
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow