// ------------------- CÓDIGO JQUERY ------------------- 


<script type='text/javascript'>

$(document).ready(function(){

/* Uso de animate () con una función callback */

// Guardamos la imagen en una variable 
var imagen = $('.animarJq');

// Lamamos a la función 
animarImg();

// Averiguar posición de imagen 
var posicion = imagen.position();

    // Función que animará la imagen 
    function animarImg() {
    
        // Desplaza la imagen, despacio 'slow'
        // 'cifra final' = velocidad animación
        
        // Retiene imagen arriba durante 2 segundos 
        imagen.animate({marginTop:0}, 1500)
        // Desplaza la imagen 200 px hacia abajo 
        imagen.animate({marginTop:200}, 1000)
        // Desplaza la imagen 350 px hacia arriba y vertical  
        imagen.animate({marginLeft:350, marginTop:150, width:150}, 3000)
        // Desplaza la imagen hacia la izquiertda y horizontal despacio 
        imagen.animate({marginTop:0, marginLeft:400, width:100}, 'slow')
        // Desplaza la imagen hacia la izquierda y despacio 
        imagen.animate({marginLeft:200}, 'slow')
        // Desplaza la imagen hacia arriba e izquierda en diagonal y despacio 
        imagen.animate({marginTop:75, marginLeft:175, width:150}, 'slow')
        // Retiene imagen en esta posición durante 2 segundos 
        imagen.animate({marginTop:75, marginLeft:175, width:150}, 2000)
        
        // Llama a la función, después de la animación
        // para repetir de nuevo el efecto. 
        imagen.animate({marginTop:0, width:100, marginLeft:0},
        	       'slow', animarImg); 
    
    }
	
});

</script>


// --------------------- CÓDIGO CSS ----------------------- 


<style type='text/css'>
#cajaAnimate {
    margin: auto;
    border: dotted 3px #339999;
    width: 500px;
    height: 300px;
    padding: 5px;
}
.animarJq {
    border: none;
    background-color: transparent;
    padding: 5px;
}
</style>