[SOLUCIONADO] script que se ejecuta en desorden

[helion]

Hola amigos veran tengo un problema con este script :/

estoy usando el siguiente codigo :

Código PHP:

  document.getElementById("test1").src='//localhost/images/2.gif';
            $( "#test1" ).animate({left: 400,}, tem );
            document.getElementById("test1").src='//localhost/images/1.gif';
            $( "#test1" ).animate({left: 384,}, tem ); 
   

lo que hace es poder desplazar el div que desee a la posicion que le indique...

primero me explico realice imagen y estoy siguiendo este orden como quiero que cumpla

1) buscar al div "test1" y convertirlo en la imagen 2.gif
2) mandar a la posicion left 400
3) buscar el div "test1" y convertirlo ahora en la imagen 1.gif
4) mandar a la posicion left 300

el error es el siguiente que lo cumple asi en este orden que no indico ....

1) buscar al div "test1" y convertirlo en la imagen 2.gif ( no se si lo cambia )
3) buscar el div "test1" y convertirlo ahora en la imagen 1.gif (cambia al div)
2) mandar a la posicion left 400 ( va a este posicion con la imagen 1.gif cuando es 2.gif)
4) mandar a la posicion left 300 (regresa con la imagen 1.gif)


no se porque convierte primero y luego hace el traslado cuando es conversion => traslado => conversion => traslado ...

porfavor alguien ayudeme :/

[Alexis88]

Si revisas la documentación oficial del método animate, notarás que como cuarto parámetro, se le puede pasar un callback (llamada de retorno) la cual ejecutará la acción que queremos que suceda una vez que termine la animación actual. Entonces, solamente te quedaría hacerlo de esta forma:

Código Javascript:

var img1 = "//localhost/images/1.gif",
    img2 = "//localhost/images/2.gif",
    tem = 1500;
 
$("#test1")
    .prop("src", img2)
    .animate(
        {left: 400}, 
        tem,
        "linear",
        function(){
            $(this)
                .prop("src", img1)
                .animate({left: 384}, tem);     
        }
    );
 

De este modo, el cambio de imagen y desplazamiento hacia la izquierda, se realizan una vez que la primera animación termine.

Saludos

[helion]

Iniciado por Alexis88

Si revisas la documentación oficial del método animate, notarás que como cuarto parámetro, se le puede pasar un callback (llamada de retorno) la cual ejecutará la acción que queremos que suceda una vez que termine la animación actual. Entonces, solamente te quedaría hacerlo de esta forma:

Código Javascript:

var img1 = "//localhost/images/1.gif",
    img2 = "//localhost/images/2.gif",
    tem = 1500;
 
$("#test1")
    .prop("src", img2)
    .animate(
        {left: 400}, 
        tem,
        "linear",
        function(){
            $(this)
                .prop("src", img1)
                .animate({left: 384}, tem);     
        }
    );
 

De este modo, el cambio de imagen y desplazamiento hacia la izquierda, se realizan una vez que la primera animación termine.

Saludos

muchas gracias por tomarte el tiempo de poder dejarme un ejemplo, la verdad me funciono, te lo agradezco :)