Crear animacion en bucle con jquery

Jquery nos facilita hacer las animaciones y ya lo hable en un articulo anterior animacion jquery pero hay animacion que queremos que sea un bucle que sea infinito y si viste el primer articulo veras que no es nada dificil solo debemos saber 1 funcion nativa de javascript pero aqui puede haber un poco de confucion por que javascript tienen 2 funciones para menejar eventos que se ejecutan en cierto tiempo y he hecho en tu proceso de aprendisaje ya lo habras visto en algun momento hablo de setTimeout  setInterval aun que sus nombre ya nos da una idea.

un poco de definicion de ambas funciones.

setTimeout
ejecuta un codigo despues de un tiempo indicado una vez.
setInterval
ejecuta un codigo en intervalos de un tiempo que le indicamos.

entonces la funcion que nos ayudara para nuestra animacion es setInterval y con esto podemos hacer muchas cosas por ejemplo vamos hacer un ejemplo basico de un bucle.

< script src="https://code.jquery.com/jquery-1.10.1.min.js">

div{
	width:100px;
	height:100px;
	background:red;
}

< div>

aqui comenzamos con una animacion de un movimiento que a estas alturas ya lo deben saber hacer ejemplo 1

$(document).ready(function(){
$("div").animate({marginLeft:100},2000)
})

aqui aprovechamos el callback para hacer un 2do movimiento pero vamos agregarle un estilo de movimiento con un plugins «jQuery Easing Plugin» que esto ya les habia mencionado en el articulo anterior y lo habia puesto en un ejemplo pero aqui les detallo mejor en este ejemplo en particular uso el estilo «easeInOutBounce» pero hay varios ya es cuestion que prueben y ver cual les gusta o se adapte a la animacion que requieren ejemplo 2

$(document).ready(function(){
$("div").animate({marginLeft:100},2000,"easeInOutBounce",function(){
   //como ya estamos dentro podemos hacer referencia del elemento como this
   $(this).animate({marginTop:100},2000,"easeInOutBounce")
})
})

si es que no les salio debe ser pro que aun no agregaron la libreria

< script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">

entonces si hacemos uso del callback 3 podemos hacer llegar el cuadrado al punto de inicio (pueden cambiar en cada animate el estilo de movimiento en mi ejemplo no lo aplico pero si es permitido) ejemplo 3

$(document).ready(function(){
$("div").animate({marginLeft:100},2000,"easeInOutBounce",function(){
   //como ya estamos dentro podemos hacer referencia del elemento como this
   $(this).animate({marginTop:100},2000,"easeInOutBounce",function(){
 
   		$(this).animate({marginLeft:0},2000,"easeInOutBounce",function(){
   			$(this).animate({marginTop:0},2000,"easeInOutBounce")   	
   		})
 
   })
})
})

Bueno llegamos al punto donde realmente vamos a ver como hacer que este elemento este en un bucle dando vuelvas y es simple. ejemplo 4

var vueltas= function (){
$("div").animate({marginLeft:100},2000,"easeInOutBounce",function(){
   //como ya estamos dentro podemos hacer referencia del elemento como this
   $(this).animate({marginTop:100},2000,"easeInOutBounce",function(){
 
   		$(this).animate({marginLeft:0},2000,"easeInOutBounce",function(){
   			$(this).animate({marginTop:0},2000,"easeInOutBounce")   	
   		})
 
   })
})
}
$(document).ready(function(){
    vueltas();
    setInterval("vueltas()",8000);
})

aqui hay un punto importante que deben tener muy en cuenta al setInterval le indicamos 8 segundos y por que? no es por que se me ocurrio si no que la animacion que hicimos dura 8 segundos si es que no te diste cuenta con 4 movimientos y cada movimiento dura 2 segundos entonces debemos hacer que se vuelva ejecutar la funcion vueltas cuando termine la vuelta y eso seria 4*2 = 8 segundos. ademas te diste cuenta que no corre al cargar la pagina si no esperamos 8 segundos pero para hacer que comienze en la primera carga es simplemente llamar la funcion vuelvas.

Optimizar bucle de animacion Jquery

la forma que indico arriba funciona perfectamente pero hay un detalle que en algun momento va consumir muchos recursos y hasta colgar el navegador y para eso hay una variacion y usando ahora setTimeout
a nuestra funcion vueltas lo metemos dentro de otra funcion que la llamaremos bucle entonces hacemos que cuando el documento este listo llame a bucle y al entrar al bucle llamamos a vuelas que tiene el efecto y sabemos que el efecto dura 8 segundos entonces hacemos que setTimeout a los 8 segundos se llame asi misma haciendo un bucle y cual es la ventaja? o como esto conviene? simple que setInterval al ejecutarlo siempre esta abierto y esto hace que consuma memoria pero setTimeout como ya lo defini en la parte superior solo cumple su proceso y muere pero claro nosotros hacemos que este en una funcion que se auto llama.

bucle = function()
{
    vueltas();
    setTimeout("bucle();",8000)
 
}
$(document).ready(function(){
    bucle() ;
})

seguro ya con esto podran hacer mejores animaciones y amplir su vision para el uso de animate.