Como crear animaciones con jquery

Jquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas. Ya el uso de flash es una practica desde ya muchos años atras por motivos que hable ya en un articulo anterior por que no usar flash y eso por eso que tomo mucho peso el uso de javascript para las animaciones que en algun tiempo lo hizo flash.

Jquery es el framework mas usado en proyectos web y personalmente es el framework que uso y este articulo sera basado con jquery y para comenzar debes saber:

Que es un callback?

quiere decir «una devolución de llamada o retrollamada» y nos sirve para correr alguna funcion cuando termine un proceso previo.

animate de jquery tiene un callback que nos servira para el desarrollo en la animacion entonces esta es la estructura.

$("elemento").animate({marginTop:100},1000,function(){
/*colocas tus instrucciones que se ejecutaran al terminar la animacion*/
})

explico el codigo que primero seleccionado a la etiqueta del html con nombre elemento y le pasamos animate con una instruccion que es darle un margin top de 100px con una velocidad de 1 segundo (se trabaja en milisegundos) y esa funcion que vez al final es el llamado callback.

entonces en la parte donde indicamos el margin top es la parte donde podemos agregar todo el css para que se realize la animacion y vamos hacer un ejemplo basico que seria que se mueva un cuadro que creamos con css pero esto sucedera cuando cargue el DOM.

#cuadrado{
 width:200px;
 height:200px;
 background:red;
}

< div id="cuadrado">< /div>

entonces al darle 100 pixeles a la izquierda y nos da el efecto del movimiento a la derecha

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

ahora al ejemplo anterior implementamos el callback

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
    console.log('al terminar el movimiento esto se va a imprimir')
  })
 
})

y aprovechamos el callback para que al finalizar realize otro movimiento pero bajando la velocidad y esto va hacer 2 movimientos fluidos

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
     $(this).animate({marginTop:100},1000)
  })
 
})

ahora puedes seguir haciendo el movimiento n veces usando un callback despues de otro

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
     $(this).animate({marginTop:100},1000,function(){
        /*puedes colocar n veces animate*/
     })
  })
 
})

hasta aqui es lo tipico y comun que enseñan pero vamos hacer otros ejemplos que nos ayuden a comprender mejor y abra nuestra mente de la potencia.

hace un tiempo me pidieron hacer un efecto en un intro con javascript y que es esta web http://piaverme.com y lo explico paso a paso como lo hice para que tengan mejor idea de como usarlo en un momento real de desarrollo.

tenemos en el html

< a href="inicio.php">< img src="images/logo-intro.png" id="logo-intro" />< /a>
< div id="linea1">< /div>
< div id="linea2">< /div>
< div id="linea3">< /div>
< div id="linea4">< /div>

a las lineas no le damos el ancho aun pero sera necesario por que cuando es position absolute es obligatorio colocarlo pero eso lo capturamos con javascript

img#logo-intro {
  position: absolute;
  bottom: 150px;
  left: 50%;
  margin-left: -256px;
}
div#linea1 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea2 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea3 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea4 {
  width: 3px;
  position: absolute;
  background: #fff;
}

ahora para que pase el efecto que los elementos entren es simple pero debes hacer que esten fuera las lineas pero antes como habia comentado en arriba vamos a dar la medida del ancho que tiene las lineas pero para que sea el efecto que ocupe el 100% del browser lo capturamos por javascript y por que no con css? simple por que esta en posicion absoluta y por defecto no va a ocupar el 100% y por que no colocamos la medidas del ancho por que estarias trabajando con 1 medida pero recuerda que sera visto por varios monitores con distintas medidas.

$(document).ready(function(){
/*primero vamos a obtener la posicion del logo  que nos devuelve el top y el left del elemento*/
posicion=$("#logo-intro").position(); 
/*esta parte ya no la explicare ya que puede llegar extenso y no es el punto realmente pero basicamente esto hace que las 4 lineas esten ubicadas fuera del browser y en la posicion adecuada para entrar luego con animate*/
$("#linea1").css({"width":$(window).width(),"left":-($(window).width()),"top":posicion.top})
$("#linea2").css({"width":$(window).width(),"left":$(window).width()*2,"top":posicion.top-212})
$("#linea3").css({"height":$(window).height(),"left":posicion.left-256,"top":-($(window).height())})
$("#linea4").css({"height":$(window).height(),"left":posicion.left+256,"top":$(window).height()*2})
})

ya teniendo ordenado los elementos hacemos el efcto de las entradas.

/*hacemos que funcione el efecto cuando todo las peticiones este cargadas*/
$(window).load(function(){
    $("#linea1").animate({"left":"0"},2000,"easeInOutCubic",function(){
        $("#linea2").animate({"left":"0"},1000,"easeInOutCubic")
    })
    $("#linea3").animate({"top":"0"},2000,"easeInOutCubic",function(){
        $("#linea4").animate({"top":"0"},1500,"easeInOutCubic")
    })
})

aqui empleamos los callback y ademas podemos ver que juego con las velocidades pero adicionalmente he agregado un atributo a la funcion pero si no lo colocas por defecto ya tiene uno pero jquery tiene unos cuantos tipos de efectos de movimientos entonces para ampliar estos movimientos puedes agregar a tu proyecto un plugins «jQuery Easing» que hace que podamos usar mas movimientos.