Plugin JQuery addEffect : Ajouter des effets d’apparitions au clic de souris simplement

Bannière plugin JQuery addEffect

Le plugin Jquery addEffect permet de cibler un ou plusieurs élements de votre page et de les faire apparaître ou disparaître dès que l’utilisateur clique dessus.

L’utilisation de la fonction $().addEffect() permet d’ajouter les effets tout en choisissant sur quels élements le clic déclenchera l’apparition ou la disparition, ainsi que le type d’effet et la durée.

Alors comment ça marche ? Voici quelques explications :
La fonction $().addEffect() prend en paramètre un objet ayant les attributs suivants :

  • cvMoreEltClass (obligatoire) qui désigne l’élément pour lequel un clic de l’utilisateur déclenchera l’apparition des éléments

  • cvLessEltClass (obligatoire) qui désigne l’élément pour lequel un clic de l’utilisateur déclenchera la disparition des éléments

  • effect (facultatif) qui indique avec quel effets les éléments apparaîtront ou disparaîtront
    ( 0 : slide, 1 :fade, 2 :toogle, par défaut hide/show)

  • cvTime (facultatif) indique la durée de l’effet d’apparition en millisecondes (par défaut 800)

  • hiddingTime (facultatif) indique la durée de l’effet de disparition en millisecondes (par défaut 300)

Voici un exemple de son utilisation :

 <html>
 	<head>
 	</head>
      <body>
            <table>
                  <tr>
                        <td><span>Jquery c'est cool </span></td>
                        <td><span class="cvMoreEltClass">Ah bon pourquoi ?</span>
                        <td><span class="cvLessEltClass">J'ai compris...</span></td>
                  </tr>
            </table>
            <div id="cvwhat" class="cvInfosEltClass">
                <p>parce que dixit Jquery.com : <br />
jQuery is a fast and concise JavaScript Library that simplifies HTML document
traversing, event handling, animating, and Ajax interactions for rapid web
development. jQuery is designed to change the way that you write JavaScript.
                </p>
            </div>
        </body>
	<script src="js/jquery.js"></script>
        <script src="js/jquery.addeffect.js"></script>
 	<script type="text/javascript">

 	$(".cvInfosEltClass").addEffect({
             cvMoreEltClass:'.cvMoreEltClass',
             cvLessEltClass:'.cvLessEltClass',
             effect:'0',
             cvTime:'100000'});
      </script>
</html>

Démo

Le code source du plugin est disponible à l’adresse : https://github.com/arnaudlefebvre/jquery.addEffect/

Voilà, à terme j’aimerai ajouter la possibilité de choisir l’évenement déclenchant l’apparition ou disparition ainsi que la gestion des effets de type « animate ».

D’ici là vos remarques sont les bienvenues :)

Laisser un commentaire

Catégories
Nuage de Tags