aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Andrés Nieto

Palma de Mallorca, España

Menú

Buscador

Crear un hover animado con jQuery

2 Oct

aNieto2k hace 5537 días en: javascript, Programacion, webdev

+ 16

Timothy van Sas nos muestra una interesante y vistosa forma de animar los eventos hover en imagenes. Para ello hace uso de jQuery y el método hover().

jQuery

$(function() {
	$('ul.hover_block li').hover(function(){
		$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
	}, function(){
		$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
	});
});

En este código vemos que estamos cogiendo los elementos del listado <ul /> con class hover_block y les añadimos una funcionalidad al evento hover() que se activará al pasar por encima con el puntero.

CSS

ul.hover_block li{
	list-style:none;
	float:left;
	background: #fff;
	padding: 10px;
	width:300px; position: relative;
	margin-right: 20px; }

ul.hover_block li a {
	display: block;
	position: relative;
	overflow: hidden;
	height: 150px;
	width: 268px;
	padding: 16px;
	color: #000;
	font: 1.6em/1.3 Helvetica, Arial, sans-serif;
}

ul.hover_block li a { text-decoration: none; }

ul.hover_block li img {
	position: absolute;
	top: 0;left: 0;
	border: 0;
}

HTML

<ul class="hover_block">
	<li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li>
	<li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li>
</ul>

Si vemos el ejemplo que Timothy ha creado, seguro que lo tendrás en cuenta para futuros desarrollos.

15 comentarios, 1 referencias

Añade un efecto hover animado con jQuery | Sumolari.com 04/10/2008 05:10

Vengador
@2 octubre 2nd, 2008 at 8:28 pm

Enlace al ejemplo no va 🙁

Responder
albertcito
@3 octubre 2nd, 2008 at 9:03 pm

URL ejemplo esta malo 🙁 !!!

Responder
gruncho
@4 octubre 2nd, 2008 at 9:23 pm

Lo mismo que vengador y albercito, no la URL del ejemplo, aunque en la web del tipo tampoco :S !

Responder
_SxR_
@5 octubre 2nd, 2008 at 10:29 pm

Pues a mi me funciona perfectamente 🙂

Responder
Dahn
@6 octubre 2nd, 2008 at 10:44 pm

Ahora sí, deben haberlo arreglado. 😛

Responder
chamo
@7 octubre 3rd, 2008 at 5:28 am

muy buena pagina
la leo en feed a diario o cuando subes pero tengo problemas para entender soy nuevo en esto informatico y no entiendo lo k es hover y otras cosas ke as puesto
y te digo 🙂 puedes poner definiciones en las prooximas??

a pos si no k importa sigue asi muy bueno k subas lo nuevo en jquery y todo eso sobres cuidate

Responder
Son
@8 octubre 3rd, 2008 at 12:34 pm

He llegado un poco por casualidad y me parece que tiene cosas muy interesantes que puedo aprender aunque a primera vista algunas me parecen complicadas

Responder
Janckos
@9 octubre 3rd, 2008 at 1:25 pm

Lo guardare en mis bookmark tools para usarlo pronto , esta genial el efecto!

Responder
Marcelo
@10 octubre 3rd, 2008 at 3:34 pm

Wow! Esta bárbaro! lo que se puede hacer con jQuery! Increible.

Responder
Argh
@11 octubre 3rd, 2008 at 3:35 pm

«En este código vemos, que estamos cogiendo los elementos del listado»

El verbo, no se separa, del reto de la, frase, con comas. Es muy incorrecto.

Responder
Ruben
@12 octubre 4th, 2008 at 10:15 am

He probado el script con Safari y no me funciona, ni siquiera hace nada, lo que le resta puntuacion, le doy un 6 😉

Responder
Gisela
@13 agosto 28th, 2009 at 5:37 am

hola sou nueva en esto no me funciona he creado una rchivo js un archivo css y un archivo html pero nada aparecen las cuatro fotos pero sin ningun efcto por favor expliquenm detalladamete como crear el archivo html

gracias

Responder
Gisela
@14 agosto 28th, 2009 at 7:09 am

Hola soy nueva en esto estoy tratando de añadir este efecto a 4 imagenes pero solo aparecen las imagenes sin ningún efecto. Alguien me pudeindicar que esta mal. he creado tres archivos 1 html, 1 css y 1 js
*******************************************************************
TYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

Documento sin título

no sale el efecto mañana continuo
Text.

Text
Text.

********************************************************************************
hover_block.js

// JavaScript Document
$(function() {
$(’ul.hover_block li’).hover(function(){
$(this).find(’img’).animate({top:’182px’},{queue:false,duration:500});
}, function(){
$(this).find(’img’).animate({top:’0px’},{queue:false,duration:500});
});
$(’ul.hover_block2 li’).hover(function(){
$(this).find(’img’).animate({left:’300px’},{queue:false,duration:500});
}, function(){
$(this).find(’img’).animate({left:’0px’},{queue:false,duration:500});
});

});
*******************************************************************************************
hover_block.css

ul.hover_block li{
list-style:none;
float:left;
background: #fff;
padding: 10px;
width:300px; position: relative;
margin-right: 20px; }

ul.hover_block li a {
display: block;
position: relative;
overflow: hidden;
height: 150px;
width: 268px;
padding: 16px;
color: #000;
font: 1.6em/1.3 Helvetica, Arial, sans-serif;
}
ul.hover_block li a { text-decoration: none; }
ul.hover_block li img {
position: absolute;
top: 0;
left: 0;
border: 0;
height: 140px;
width: 258px;
}

Gracias por su ayuda y correciones

Responder
Gisela
@15 agosto 28th, 2009 at 10:04 pm

hola ya lo modifique gracias, ahora alguien me podria indicar como insertar el html en una plantilla html. gracias.

Responder
mat
@16 septiembre 21st, 2009 at 9:22 pm

Anieto!
Me encuentro en un embrollo justametne con «hover», di vueltas por tutoriales, di vuelta el código, pero no consigo que el efecto ande únicamente cuando se posa el mouse encima.

Este es el codigo:

$(document).ready(function() {

spectrum();

function spectrum(){
var hue = ‘rgb(‘ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘)’;
$(‘#welcome’).animate( { color: hue}, 1000);
spectrum();
}

});

Se agradece una mano!

P.D: Este codigo viene del plugin «jQuery Color Animations»

Responder