Añade un efecto hover animado con jQuery

This post was published 10 years ago. It may be exremely outdated.

Uno de los principales motivos por los que me gusta Mootools es la cantidad de efectos que podemos lograr con él.

Sin embargo hoy os traigos un efecto logrado con jQuery y creado por Timothy van Sas.

El código

Javascript

$(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});
});
});

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>

Podemos ver el ejemplo que ha creado Timothy para hacernos una idea de cómo queda.

Vía Anieto2k.

3 Responses to Añade un efecto hover animado con jQuery

Hola sou 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
********************************************************************************

Documento sin título

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

EL CONTENIDO DEL HTML :

Documento sin título

no sale el efecto mañana continuo
Text.

Text
Text.

Bien, el problema que tienes es que has modificado el código HTML original y no has adaptado el CSS ni jQuery para que funcione.

Si quieres evitar problemas te recomiendo que uses el código HTML que aparece en el artículo.

Leave a Reply