Animate jQuery

hover_thbA l’aide de 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>

hover

Démonstration sur cette page :  animate_hover

Détails sur l’auteur ici :  http://www.incg.nl/blog/2008/hover-block-jquery/

A voir aussi