Añade un efecto hover animado con jQuery
This post was published 16 years ago so it may be 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.
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.