Effect.SlideDown()

L'effet Effect.SlideDown() permet de mettre en place un effet d'apparition progressive d'élément DOM.
L'effet consiste concrètement en une apparition de l'élément depuis le haut dans toute sa largeur vers le bas.

Cet effet peut notamment être envisagé dans le cas de menus dynamiques avec sous menus (ndr : l'effet est appliqué sur les éléments DOM de sous-menu).
On peut aussi imaginer par exemple la représentation de fréquences sonores d'un morceau à l'aide de cet effet.

!!! :: l'effet inverse de Effect.SlideDown() est Effect.SlideUp() qui est aussi présenté dans ce site.


Le tableau spécifique d'options applicables à Effect.SlideDown est recopié ci après :

Propriété	Type	Défaut	Description
restoreAfterFinish	Boolean	true	Permet de définir si l'élément doit être remis dans son contexte initial après application de l'effet.
afterSetup	Function (effect)		Méthode de 'callback' à détailler (ndr : 08/01/2007 mise à jour à faire)
afterUpdateInternal	Function (effect)		Méthode de 'callback' à détailler (ndr : 08/01/2007 mise à jour à faire)
afterFinishInternal	Function (effect)		Méthode de 'callback' à détailler (ndr : 08/01/2007 mise à jour à faire)

Des exemples d'utilisation de l'effet vous sont présentés ci après :

Exemple d'utilisation simple de Effect.SlideDown

Un exemple simple d'utilisation vous est présenté ci après.

toto président, toto président, webjax c'est bien webjax c'est bien

tata présidente, tata présidente, webjax c'est bien webjax c'est bien

Sélectionner le champ pour l'effet : test_0 (div 'toto' jaune) test_1 (div 'tata' verte)
Durée de l'effet (duration) : 0.1 0.2 0.3 0.4 0.5 1.0 1.3 1.8 2.0 5.0
Réajustement 'From' (scaleFrom) : 0 10 20 30 40 50 60 70 80 90 100
Réajustement 'To' (scaleTo) : 0 10 20 30 40 50 60 70 80 90 100
Retour en position initiale (restoreAfterFinish) : oui (true) non (false)


Le code de l'exemple est présenté ci après :
<!-- code HTML des zones 'div' --> <div id="test_0" style="background-color : #FFFFAA; color : #212121; border : #FFFF53 1px solid; width : 300px; height : 75px; " > <div> toto président, toto président, webjax c'est bien webjax c'est bien </div> </div> <br/> <div id="test_1" style="background-color : #C9FF93; color : #212121; border : #96FF2D 1px solid; width : 300px; height : 75px; " > <div> tata présidente, tata présidente, webjax c'est bien webjax c'est bien </div> </div> <!-- code HTML du bouton d'action --> <input type="button" id="ok_0" value="Appliquer l'effet Effect.SlideDown sur l'élément sélectionné" onClick="new Effect.SlideDown($F('champ_0'),{ duration : Number($F('duree_0')), scaleFrom : Number($F('sf_0')) , scaleTo : Number($F('st_0')) , restoreAfterFinish : $F('rpi_0') } );" />

Exemple d'utilisation avec Effect.Transitions

Cet exemple permet de tester l'utilisation d'effets Effect.Transitions avec un Effect.SlideDown .
L'exemple est testable ci après :

toto président, toto président, webjax c'est bien webjax c'est bien

Effet de transition à appliquer (transition) : linear sinoidal reverse flicker wobble pulse

!!! :: attention, la sélection de l'effet de transition applicable depuis la liste déroulante est désactivée car ne semble pas fonctionner (ndr : 08/01/2007, firefox 1.5.0.9).
L'effet de transition appliqué par défaut est Effect.Transitions.flicker .

Le code de cet exemple est présenté ci après :
<!-- code HTML de la zone 'div' --> <div id="test_2" style="background-color : #A8FFA8; color : #212121; border : #28FF28 1px solid; width : 300px; height : 75px; " > <div> toto président, toto président, webjax c'est bien webjax c'est bien </div> </div> <!-- code HTML du bouton d'action --> <input type="button" id="ok_1" value="Appliquer l'effet Effect.SlideDown sur l'élément sélectionné" onClick="new Effect.SlideDown('test_2',{ duration : 2.0, scaleFrom : 100 , scaleTo : 0 , restoreAfterFinish : true , transition : Effect.Transitions.flicker } );" />

: 07/01/2007 23:30:55 | : Scriptaculous, Scriptaculous.js, Effect.SlideDown, SlideDown, Effect, CombinationEffects, multibrowser, comptatibility, visibility, opacity, filter, apparition,

Aucun commentaire enregistré