Como ya sabemos jQuery es un framework para javascript que permite desarrollar sitios de manera más dinámica y fácil.
En el tutorial de hoy veremos una manera muy sencilla pero agradable de hacer distintas animaciones con jQuery, para lo que utilizaremos el método $.animate(), el cual funciona mediante atributos ces.
Para el siguiente ejemplo animaremos 3 contenedores, el primero de ellos lo moveremos a la izquierda de la pantalla, el segundo aumentaremos el tamaño del ancho y alto, en el tercer y último contenedor haremos una combinación de los anteriores más una animación adicional que permita moverlo a la derecha una vez terminada la primera animación.
Veamos el código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Animar con jQuery</title>
<link href="estilos.css" rel="stylesheet" />
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#divAnimado').animate({
'margin-left':'600px'
},1500);
$('#divAnimado2').animate({
'width':'200px',
'height':'200px'
});
$('#divAnimado3').animate({
'width':'200px',
'height':'200',
'margin-left':'600px'
},1500).animate({
'margin-left':'500px'
},'fast');
});
</script>
<style>
#divAnimado,#divAnimado2, #divAnimado3{
width: 150px;
height: 150px;
margin-left: 50px;
margin-top: 50px;
background-color: #0000FF;
}
#divAnimado2{background-color:red;}
#divAnimado2{background-color:green;}
</style>
</head>
<body>
<div id="divAnimado"></div>
<div id="divAnimado2"></div>
<div id="divAnimado3"></div>
</body>
</html>
Lo primero que haremos es crear los 3 contenedores y darle estilos, tal como vemos en las siguientes líneas:
<style>
#divAnimado,#divAnimado2, #divAnimado3{
width: 150px;
height: 150px;
margin-left: 50px;
margin-top: 50px;
background-color: #0000FF;
}
#divAnimado2{background-color:red;}
#divAnimado2{background-color:green;}
</style>
</head>
<body>
<div id="divAnimado"></div>
<div id="divAnimado2"></div>
<div id="divAnimado3"></div>
</body>
A continuación aplicaremos las animaciones, el primer contenedor lo moveremos a la izquierda, de acuerdo a nuestros estilos, todos los contenedores tienen un margen izquierdo de 50px. Para éste contenedor aplicaremos un movimiento a la izquierda hasta al punto 600, es decir avanzará 550 pixeles a la izquierda a partir del pixel (o punto) 50.
Un parámetro opcional que podemos agregar es el tiempo en milisegundos que tardará en hacer la acción o si lo preferimos también podemos usar una cadena de texto con las opciones ‘fas’, ‘normal’ o ‘show’, en éste ejemplo le diremos que lo haga en 1.5 segundos:
$('#divAnimado').animate({
'margin-left':'600px'
},1500);
Para el contenedor número dos solo incrementaremos el alto y el ancho, de acuerdo a los estilos declarados todos medían 150px de ancho y 150px de alto, para éste contenedor incrementaremos su tamaño en 50 pixeles, es decir las nuevas medidas serán de 200 de alto por 200 de ancho, tal como lo podemos ver a continuación:
$('#divAnimado2').animate({
'width':'200px',
'height':'200px'
});
El tercero es mi favorito, además de moverlo a la izquierda e incrementar sus medidas, aplicaremos una segunda instrucción que lo retrocederá 100 pixeles después del primer movimiento:
$('#divAnimado3').animate({
'width':'200px',
'height':'200',
'margin-left':'600px'
},1500).animate({
'margin-left':'500px'
},'fast');
Ojo aquí, como mencionamos antes, al definir el margen le estamos especificando cuántos pixeles a partir del origen avanzará, en la primera animación estará a 600px a partir del margen de la izquierda (margin-left), pero notamos que en la segunda animación utilizamos otro margin-left, la lógica nos diría que a partir del punto 600px lo estamos moviendo 500px a la izquierda, pero no, lo que en realidad está pasando es que ahora lo recorrerá al pixel 500 correspondiente al margen izquierdo.
De ésta manera es cómo podemos animar elementos con jQuery, prueben cambiando los atributos utilizados por otros, así como probar otras medidas, para ver los alcances que tiene el método $.animate().
También pueden checar el sitio oficial de jQuery y aprender más sobre éste método
Para ver el ejemplo en funcionamiento pueden acceder a la siguiente dirección
hola, cuál sería la manera de hacer que ocurra el movimiento hacia abajo, o hacia arriba? probé con margin-bottom, pero no me funciona
Saludos y gracias
Hola, es muy sencillo, es de manera similar que a los lados, pero en lugar de utilizar margin-left, utiliza margin-top
supongamos que tu elemento inicialmente lo tienes a un margen superior con 250px (margin-top:250px) y lo que quieres hacer es recorrerlo 100px para arriba lo que puedes hacer dentro del metodo animate declarar:
$(elemento).animate({
'margin-top':'150px'
});
de igual manera si lo quieres hacer es recorrerlo 100px para abajo lo que debes hacer es:
$(elemento).animate({
'margin-top':'350px'
});
recuerda que el punto de partida siempre será 0px y la medida que declares en animate es en referencia a 0, no en referencia a tu medida inicial declarada
saludos 😉
Hola, a mi no me funciono no se si ay que añadir archivos para que funcione el jquery ?
te marca algún error o algo por el estilo?
tienes el complemento firebug para mozilla firefox??
quizá algún error de sintaxis o algo te esté fallando
Hola. He estado doandole muchas vueltas pero no lo logro.
Tengo interes de hacer una intro para una web de unos 3 o 4 segundos con DreamweaverCS6 usando JQuery y después de ese tiempo lanzar redireccionando a otra web (ya tengo el código es bien facil).
La cosa es que quiero animar y no logro. Quiero que simplemente baje un box negro de 100% de ancho y 50% de alto y otro desde abajo (como una cortina) y después se retire y deje ver un logo centrado. Nada más.
Me gustria que me orientaras y me ayudes.
Muchas gacias por el gran serivicio que haces con estos Tips.
Lo primero que tienes que hacer es desde tu hoja de estilos posicionar tus elementos fuera de la pantalla, es decir, para el elemento de arriba en los estilos manejar un margin superior negativo, algo como "top: -1000px" (o los pixeles que creas necesarios para que no se vea en la pantalla) y para el elemento de abajo manejar un margen inferior negativo también, algo como "bottom:-1000px" y para la animación podrías usar algo como
$(‘#elementoArriba’).animate({
‘top’:’0px’
},1500).animate({
‘top’:'-1000px’
});
$(‘#elementoArriba’).animate({
‘bottom’:’0px’
},1500).animate({
‘bottom’:'-1000px’
});
En el caso de que las propiedades "top" y "bottom" no funcione intenta con margin-top y margin-bottom ó con marginTop y marginBottom respectivamente
recuerda que en el codigo de ejemplo que pongo, 1500 es el tiempo de espera entre una animacion y otra
saludos
Buenas!
A mi me ha sido de gran utilidad. La única pega que tengo (bastante importante) es que las animaciones no se ejecutan en Firefox. ¿Por qué puede ser? Espero que podais echarme un cable.
Saludos y gracias de antemano.
Hola, haz probado el ejemplo en firefox? entra a esta liga y verás que sí funciona sin problemas
christian.sietemedia.com.mx/animate/animate.html
qué versión de frefox tienes?
Quizá se te esté escapando alguna comilla, algún punto y coma o algo por el estilo
saludos