Detención de una función de jQuery de actuar varias veces
Pregunta
Tengo un efecto de palanca de desvanecimiento, pero cuando se hace clic en el botón varias veces que se desvanece dentro y fuera más de una vez. (Así que si hago clic en el id de fundido 20 veces rápido se desvanecen dentro y fuera varias veces) ¿Cómo puedo dejar esto y hacerlo de modo que sólo se puede activar o desactivar el desvanecimiento cuando se hizo la animación? He intentado conseguir el valor actual y hacer una declaración, si, pero no funcionó: * (
Gracias
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');
});
});
Solución
Es necesario comprobar si el elemento no es: animado, de ser así invocar el .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>
Demostración: http://jsbin.com/irare
Otros consejos
Uso .stop()
. Esto detiene todas las animaciones en un elemento.
$('#fadeMe').next().stop().fadeToggle('slow');
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow