Usando setTimeout para retrasar una animación jQuery

Question

Estoy trabajando en algunas transiciones de salida en la imagen cuando un usuario presiona el botón para pasar a la siguiente imagen. Cuando hay varias imágenes una al lado de la otra que son muy estrechas, todas esas imágenes harán la transición al mismo tiempo. Así que verifico el ancho de las imágenes y agrego las delgadas a una matriz y luego ejecuto la transición en cada objeto de la matriz. Quería crear un pequeño retraso entre la animación de cada imagen en la matriz, así que estoy tratando de ejecutar mi jQuery.animate después de un tiempo de espera de 1 segundo.

Estas son las formas en que he intentado que el tiempo de espera funcione sin éxito:

1.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

2.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        function tempTransition() {
            set[i].transitionOut( $('#gallery'), 562 );
        }
        setTimeout(tempTransition, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

3.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

transitionOut ():

jQuery.fn.transitionOut = function(parent, height) {
    this.animate({
        height: '0',
        top: height + 'px'
    }, function() {
        $(this).remove();
    });
}

Lo hice funcionar usando el ejemplo de cierre de CMS. Pero ahora me encuentro con un nuevo problema. La transición solo ocurre con la segunda imagen. Cuando haya tres imágenes, se animará la imagen 1, la demora, la imagen animada 2, la imagen animada 3. No habrá demora entre 2 y 3.

Aquí está el nuevo código:

for (i=0; i < set.length; i++) {
    (function(i) {
        if (i != 0) {

            function tempTransition() {
                set[i].transitionOut( $('#gallery'), 562 );
            }
            setTimeout(tempTransition, 200);
        } else {
            set[i].transitionOut( $('#gallery'), 562 );
        }
    })(i);
}

Answer 1

Al mirar su código, creo que tiene otro problema de cierre , tal vez El problema más común que he visto cuando las personas trabajan con bucles y funciones anidadas.

La variable i a la que se refiere su función de devolución de llamada setTimeout , es la misma ( porque JavaScript solo tiene un alcance de función, no block-scope ), y cuando esas funciones se ejecutan de forma asincrónica, el bucle ya ha terminado , y la variable i contendrá el conjunto . longitud - 1 para todos los casos donde se usa setTimeout .

Como de costumbre, intente capturar la variable i con otro cierre:

for (var i=0; i < set.length; i++) {
  (function (i) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
  })(i);
}

Answer 2

Usar el tiempo de espera es algo engañoso cuando se trata de animación / efecto temporizado.

No probé su código, pero al examinarlo, noté que está usando setTimeout sin nada que lo borre.

¿Qué sucede cuando los usuarios activan eventos durante el 'retraso'? Tienes que implementar algo para gestionar eso también.

Lo siento, no tengo una respuesta para usted ahora, tal vez cuando tenga más tiempo más tarde o alguien salga con una solución más elegante.

Answer 3

jquery fadeOut http://docs.jquery.com/Effects/fadeOut le permite cree una devolución de llamada, que es una función que puede ejecutar cuando finaliza el fadeOut. Entonces, si lo desea, puede encadenar los fundidos juntos para que cuando termine llame al siguiente. Si eso no es lo que está buscando, podría estar malinterpretando su pregunta.

Además, en el ejemplo 3, creo que desea escribirlo así y no pasar una definición de función a setTimeout ya que eso no hará nada.

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);