Contenido

Crear un hover animado con jQuery

2 oct

+ 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.

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

  • Pues a mi me funciona perfectamente :)

  • Ahora sí, deben haberlo arreglado. :P

  • 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

  • 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

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

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

  • “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.

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

  • 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

  • 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

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

  • 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”

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.