Buenas a todos!!
Hoy traigo una función de JQuery para animar un poco nuestras páginas web. El ejemplo que he tomado es un poco simple (no he tenido mucho tiempo...), pero basta para ver como funciona.
La función es el animate y sirve para animar, valga la redundancia, nuestros elementos de las páginas web cambiando de forma progresiva los estilos de estos.
Para utilizar la función basta con unos sencillos pasos:
Lo primero seria cargar la libreria jquery; con esta dirección cargamos la última versión de jquery:
Seguidamente ponemos una imagen cualquiera con una altura y una anchura de 10em por ejemplo :
Y por último creamos la función que nos permita animar:
Este código nos permite agrandar la imagen cuando el ratón está encima de ella y reducirla cuando lo sacamos fuera. Para hacer esto vamos por partes:
Seleccionamos mediante el JQuery la id de la imagen: $('#imagen').
Aplicamos la función de la librería JQuery mouseover o mouseout que nos permite establecer una nueva función que se ejecutará cuando el ratón esté encima o fuera de la imagen.
Nuevamente seleccionamos la id que queramos y le aplicamos, esta vez, la función animate.
La función animate acepta varios parámetros, en este caso nos quedaremos con dos:
El primer parámetro es una lista dónde especificaremos las propiedades CSS que queremos cambiar de la imagen, en este caso he cambiado la altura y anchura; el segundo parámetro es la duración de la animación.
NOTA: Es importante que el script se ejecute después de crear el objeto que queremos animar y no antes, en el caso que elijamos funciones como mouseover o mouseout.
Un saludo!!
Hoy traigo una función de JQuery para animar un poco nuestras páginas web. El ejemplo que he tomado es un poco simple (no he tenido mucho tiempo...), pero basta para ver como funciona.
La función es el animate y sirve para animar, valga la redundancia, nuestros elementos de las páginas web cambiando de forma progresiva los estilos de estos.
Para utilizar la función basta con unos sencillos pasos:
Lo primero seria cargar la libreria jquery; con esta dirección cargamos la última versión de jquery:
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Seguidamente ponemos una imagen cualquiera con una altura y una anchura de 10em por ejemplo :
<div>
<img id="imagen" src="mi_imagen.png" style="height: 10em; width: 10em;" />
</div>
<img id="imagen" src="mi_imagen.png" style="height: 10em; width: 10em;" />
</div>
Y por último creamos la función que nos permita animar:
<script>
$('#imagen').mouseover(function() {
$('#imagen').animate({
height: '12em',
width: '12em'
}, 1000);
});
$('#imagen').mouseout(function() {
$('#imagen').animate({
height: '10em',
width: '10em'
}, 1000);
});
</script>
$('#imagen').mouseover(function() {
$('#imagen').animate({
height: '12em',
width: '12em'
}, 1000);
});
$('#imagen').mouseout(function() {
$('#imagen').animate({
height: '10em',
width: '10em'
}, 1000);
});
</script>
Este código nos permite agrandar la imagen cuando el ratón está encima de ella y reducirla cuando lo sacamos fuera. Para hacer esto vamos por partes:
Seleccionamos mediante el JQuery la id de la imagen: $('#imagen').
Aplicamos la función de la librería JQuery mouseover o mouseout que nos permite establecer una nueva función que se ejecutará cuando el ratón esté encima o fuera de la imagen.
Nuevamente seleccionamos la id que queramos y le aplicamos, esta vez, la función animate.
La función animate acepta varios parámetros, en este caso nos quedaremos con dos:
El primer parámetro es una lista dónde especificaremos las propiedades CSS que queremos cambiar de la imagen, en este caso he cambiado la altura y anchura; el segundo parámetro es la duración de la animación.
NOTA: Es importante que el script se ejecute después de crear el objeto que queremos animar y no antes, en el caso que elijamos funciones como mouseover o mouseout.
Un saludo!!
No hay comentarios:
Publicar un comentario