[SOLUCIONADO] Parar funcion .animate() durante X segundos en jquery

[Hachector]

¡Buenas a todos!

Primero de todo, soy nuevo por aquí, así que pido disculpas si me sale el post rarillo o no se poner bien el tema del código y esas cosas (es mi primerito día xD)

Estoy haciendo unas cuantas probaturas con Javascript y Jquery, entre ellas tener un DIV con una imagen dentro, que se mueva aleatoriamente dentro de otro DIV mayor.

Hasta ahí, todo perfecto, además le hago un "mirror" cambiandole el CSS a la imagen para que si va hacia la derecha, apunte a la derecha, y si va a la izquierda, pues izquierda. Pero ahora me asalta la duda de si se podría o no hacer que, cuando llegue a una posición, y antes de moverse hacia otra, cambie la url de la imagen por otra, y se mantenga en esa posicíon durante un par de segundos, quieta.

He intentado meterle un .delay(), .setTimeOut() y .setInterval() sin demasiado exito (no se si no se puede, o soy un poco cafre xD)

Pongo (o intento poner) el código Javascript:

Código Javascript:

$(document).ready(function(){
            //usamos la funcion de la libreria backstretch para poner una imagen de fondo adaptable
             $.backstretch("./bg.jpg");
        
            //hacemos un for, y llamamos a la funcion tantas veces como
            //divs a animar tengamos
            var i =0;
            for(i=0;i<2;i++){
                var id = "flecha"+i;
                var element = document.getElementById(id);
                fAnimate(element);
            }
        });
        
        
        //funcion para animar un div y que se mueva por la pantalla, pero dentro de otro div
        function fAnimate(element){
            //primero, obtenemos una nueva posicion dentro del div principal
            //Llamamos a funcion que devolvera el nodo padre
            var father = selpadre(element);
            //Cogemos la siguiente posicion del div
            var newpos = fNewPosition(father);
            
            //ahora, sacamos la posicion anterior del div que queremos mover
            var tcube = $(father);
            var oldpos = tcube.position();   
 
            //llamamos a la función que calcula la velocidad de la animacion
            var velocidad = fCalcSpeed([oldpos.top, oldpos.left], newpos);
            
            //IF que va a mirar hacia donde se mueve, y va a "reflejar" la imagen para que mire hacia ese lado.
            if(oldpos.left >= newpos[1]){
                //va a la derecha
                $(element).css({"-moz-transform":"scale(1, 1)","-webkit-transform":"scale(1, 1)","transform":"scale(1, 1)"}); 
            } else {
                //va a la izquierda
                $(element).css({"-moz-transform":"scale(-1, 1)","-webkit-transform":"scale(-1, 1)","transform":"scale(-1, 1)"}); 
            }
 
            //tenemos las posiciones nuevas y viejas, tenemos la velocidad, 
            //solo queda llamar a la funcion de animar y que se mueva.
            $(father).animate({ top: newpos[0], left: newpos[1]}, velocidad, function(){    
                fAnimate(element);        
            });
        }
 
        
        //funcion que devuelve una posicion aleatoria dentro del div principal
        function fNewPosition(element){
            //sacamos la posicion del div principal
            var divprin = $("#principal");
            var divcuad = $(element);
            //obtenemos unos valores X e Y aleatorios que esten dentro del div principal
            /*hay que restar al div principal el ancho y largo del div chiquitin, para que no se salga fuera del grande.*/
            var randomX = Math.floor(Math.random() * (( divprin.width()-divcuad.width() )+1));
            var randomY = Math.floor(Math.random() * (( divprin.height()-divcuad.height() )+1)););              
            
            //devolvemos los valores en forma de array
            return [randomY, randomX];
        }
        
        
        //funcion que calcula la velocidad a partir de sus dos posiciones
        function fCalcSpeed(oldpos, newpos) {   
            var x = Math.abs(oldpos[1] - newpos[1]);
            var y = Math.abs(oldpos[0] - newpos[0]);
            
            var testea = x > y ? x : y;
            var modificador = 0.1;
 
            var speed = Math.ceil(testea/modificador);
            return speed;
        }
            
        
        //funcion que recibe un elemento y devuelve el elemento padre
        function selpadre (elemento){
            var pid=elemento.parentNode;    
            return pid;
        }
 

El HTML no tiene mucho, un DIV grande, otro DIV dentro, y una imagen dentro más

[moginn]

http://api.jquery.com/stop/

[Hachector]

Gracias mogin por tu explicación detallada con claros ejemplos y gran retórica...

No, en serio, en realiad sí que me ha ayudado, gracias xD

Por si luego alguien entra y le interesa, efectivamente con la funcion .stop() que ha puesto moginn se puede parar la animación, pero para hacer lo que yo quería, hay que ponerla dentro de la función .animate(), seguido por un setTimeout() que vuelva a llamar a la funcion principal (en este caso, fAnimate() ) para hacerla recursiva.

Finalmente, el código me ha quedado tal que así:

Código Javascript:

$(father).animate({ top: newpos[0], left: newpos[1]}, velocidad, function(){    
        $(father).stop();
        setTimeout(function(){ fAnimate(element); },1000);                  
    });