Fade-In/Fade-Out avec Javascript et Prototype.js
le 25 août 2008 par sahid
Fade-In/Fade-Out with Javascript and Prototype.js
Faire apparaître et disparaître des éléments HTML
Bon…, apres avoir recherché deux, trois minutes sur google afin de trouver une methode de fade in/out en Javascript utilisant prototype et surtout n’étant pas une usine à gaz, je me suis mis à en coder une rapide.
Exemple:
Les methodes de fade-In et fade-Out
Les deux fonctionnes de la même manière, elles étendent la classe Element avec la methode addMethodes de prototype.
| methods | Parameters | Events |
|---|---|---|
| fadeIn ([options]) | delay (in millisecond), begin (start opacity, min 0.0), end (end opacity, max 1.0) | onCreate, onComplete |
| fadeOut ([options]) | delay (in millisecond), begin (start opacity, min 0.0), end (end opacity, max 1.0) | onCreate, onComplete |
Usage:
-
$ (‘myElement’).fadeIn (); // fait apparaître
-
$ (‘myElement’).fadeOut (); // fait disparaître
-
-
/** options avancées */
-
$ (‘myElement’).observe (‘fadeIn:onComplete’, callback).fadeIn ();
-
$ (‘myElement’).fadeIn ({delay:30}); /// default 8
-
$ (‘myElement’).fadeIn ({delay:30, begin:0.3}); // default 0.0
-
$ (‘myElement’).fadeIn ({delay:30, begin:0.3, end:0.8}); // default 1.0
-
Source:
http://sahid.funraill.org/wp-content/uploads/2008/08/fadeinout.js
1 septembre 2008 at 10:05
[…] Article deprécié, voir : http://sahid.funraill.org/2008/08/25/fade-in-fade-out-with-javascript-and-prototypejs/ […]
12 septembre 2008 at 11:17
[…] Ajout d’un effet de fade-in à la fonction (utilisé ici) […]
9 octobre 2008 at 5:55
Bon script, court, simple et efficace.
J’ai cependant été témoins de bugs (boucle infinie) dans le cas ou l’opacity était supérieure à 1
Je suggère donc les corrections suivantes qui ont résolu le problème de mon côté:
Ligne 19 :
element.setOpacity (i);
=>
element.setOpacity (i > end ? end : i);
Ligne 42 :
element.setOpacity (i);
=>
element.setOpacity (i < end ? end : i);
25 octobre 2008 at 20:02
Bonjour Sahid
Pourquoi ne pas faire ça directement avec JQuery par exemple ?
Cela n’enlève en rien l’intérêt de ton script bien sûr ;-)
A+
Sylvain
26 octobre 2008 at 22:05
Salut Sylvain
en fait jQuery n’est pas compatible avec prototype.js (en gros tu ne peux pas avoir les deux lib dans ton le même html)
donc comment tu fais quand tu travailles avec prototype.js ??? :)
il y a bien scriptaculous, mais un peu lourd juste pour un effet de fadein/out
voila le pourquoi du comment
A+
27 octobre 2008 at 15:30
Oups, j’avais omit ce détail :D
Désolé.
A+
Sylvain