animation, effet, jquery, plugin

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 :

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

Et de ce code javascript :

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

Vous obtenez visuellement :

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

Lien :

• jQuery Plugin – Feature List