WebCssDesign

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/

Catégories: Ajax, Css
Tags: Css, jquery