Animate jQuery
A l’aide de jQuery l’on peut rĂ©aliser très simplement de jolies animations. Je prĂ©sente ici la fonction animate qui permet de faire cela.
Pour ce faire il vous faut une liste de liens textes en position relative et pour chaque lien une image en position relative.
Le 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;
}
Le code 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});
});
});
et pour finir le code 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>
Démonstration sur cette page : animate_hover
DĂ©tails sur l’auteur ici : http://www.incg.nl/blog/2008/hover-block-jquery/
Loading ...

Laisser un commentaire