Ulzurrun de Asanza i Sàez

Añade un efecto hover animado con jQuery

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 replies on “Añade un efecto hover animado con jQuery

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

  2. EL CONTENIDO DEL HTML :

    Documento sin título

    no sale el efecto mañana continuo
    Text.

    Text
    Text.

  3. 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 to Gisela Cancel reply

Your email address will not be published.

Required fields are marked *

Your avatar