Animate jQuery

hover_thbA 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>

hover

Démonstration sur cette page :  animate_hover

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

Aucun commentaire

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

16 − dix =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?