jquery - framework - efectos web
¿Cómo puedo hacer que las animaciones se ejecuten una por una? (5)
El código HTML:
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
El código js:
<script type="text/javascript">
$(document).ready(function() {
var lis = $("li");
for (var i = 0; i < lis.length; i++) {
$(lis[i]).animate({opacity: 0}, 1000);
}
});
</script>
Solo encuentro que las lis desaparecerán juntas. ¿Cómo puedo hacer para que desaparezcan uno por uno?
Cada elemento tiene su propia cola de animación, de modo que, como has visto, todos animan al mismo tiempo en lugar de esperar a que termine el elemento anterior. Puede agregar un retraso para cada elemento:
$(lis[i]).delay(i*1000).animate({opacity: 0}, 1000);
// ------^^^^^^^^^^^^^^
Demostración: http://jsfiddle.net/p2kdpxr3/
Perdón por unirte tarde a la fiesta.
Las respuestas existentes tienen problemas cuando un temporizador bloquea y depende de la precisión de los temporizadores, además requieren un retraso real.
jQuery realmente proporciona una forma genérica de realizar animaciones secuencialmente con promesas:
$(document).ready(function() {
var lis = $("li");
var queue = $.Deferred().resolve(); // create an empty queue
lis.get().forEach(function(li){
queue = queue.then(function(){
return $(li).animate({opacity: 0}, 1000).promise();
})
});
});
Tenga en cuenta que esto funcionará incluso si les asigna diferentes duraciones de animación o animaciones diferentes, el resultado en la queue contendrá un gancho cuando termine la última animación. Esto también admite agregaciones (esperando que todas las promesas finalicen en paralelo) y más.
Puede usar la función de retraso ()
for (var i = 0; i < lis.length; i++) {
$(lis[i]).delay(i * 400).animate({opacity: 0}, 1000);
^^^^^^^^^^^^^^
}
En su lugar, podría usar la animation/transition CSS y el evento transitionEnd relevante con la siguiente lógica:
$(function() {
var events = [
"webkitTransitionEnd",
"oTransitionEnd",
"otransitionend",
"MSTransitionEnd",
"transitionend"
];
$("li").on(events.join(" "), function(e) {
$(this).next().addClass(''animated'');
}).first().addClass(''animated'');
});
li {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
li.animated {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>