Plugin jQuery : Feature List, animer vos listes

Un plugin jQuery comme je les aimes : Feature List vous permet d’animer et de faire défiler les élements d’une liste.

Trois options permettent de configurer ce plugin :

• start_item – pour définir sur quel élement de la liste démarre l’animation
• pause_on_hover – pour bloquer l’animation au survol d’un élement
• transition_interval – la durée de la transition

A partir de cette source HTML :

[html]
<ul id="tabs">
<li>
<a href="javascript:;">
<img src="services.png" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="programming.png" />
<h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span>

</a>
</li>
<li>
<a href="javascript:;">
<img src="applications.png" />
<h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>

</li>
</ul>
<ul id="output">
<li>
<img src="sample1.jpg" />
<a href="#">See project details</a>
</li>
<li>

<img src="sample2.jpg" />
<a href="#">See project details</a>
</li>
<li>
<img src="sample3.jpg" />
<a href="#">See project details</a>
</li>
</ul>
[/html]

Et de ce code javascript :

[javascript]
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
[/javascript]

Vous obtenez visuellement :

Démo et téléchargement sur le site de jQueryGlobe.

Lien :

• jQuery Plugin – Feature List