Effect.Shrink()

L'effet Effect.Shrink() pemet de réduire un élément DOM en tenant d'un point de disparition (ndr : option 'direction' de l'effet).
Cet effet est l'effet inverse de l'effet Effect.Grow() qui lui permet de faire apparaître l'élément DOM.

Des exemples d'utilisation de cet effet sont présentés ci après.

Exemple simple d'utilisation de Effect.Shrink()

Un exemple d'utilisation vous est présenté ci après.
Une zone 'div' est utilisée pour tester l'effet.
L'exemple est testable ci après :

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

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
Point de fuite de l'élément (direction) : top-left top-right bottom-left bottom-right center




Le code source de l'exemple est recopié ci après :
<!-- code HTML de la zone 'div' --> <div id="test_0" style="background-color : #FFA8A8; color : #212121; border : #DF0000 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 des boutons d'action --> <input type="button" id="ok_0" value="Appliquer l'effet Effect.Shrink() sur l'élément 'test_0'" onClick="new Effect.Shrink('test_0', { duration : Number($F('duree_0')) , direction : String($F('direction_0')) } );" /> <br/> <input type="button" id="ok_1" value="Faire réapparaître l'élément 'test_0'" onClick="new Effect.Appear('test_0');" />

Disparition multiples d'éléments DOM avec Effect.Shrink

Cet autre exemple présente une disparition multiple d'éléments.
Il s'agit en fait d'une succession d'effets Effect.Shrink() qui sont relancés depuis les 'callback' précédents.
L'exemple est testable 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

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
Point de fuite de l'élément (direction) : top-left top-right bottom-left bottom-right center



Le code source de l'exemple est repris ci après :
<!-- code HTML des zones 'div' --> <div id="test_1" style="background-color : #A3D1D1; color : #212121; border : #54A9A9 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_2" style="background-color : #C082FF; color : #212121; border : #6600CC 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_2" value="Appliquer l'effet Effect.Shrink() sur les éléments 'test_1' et 'test_2'" onClick="new Effect.Shrink('test_1', { duration : Number($F('duree_1')) , direction : String($F('direction_1')) , restoreAfterFinish : false , afterFinishInternal : function (effect) { $('test_1').style.display = 'none'; new Effect.Shrink('test_2',{ duration : Number($F('duree_1')) , direction : String($F('direction_1')) }); } } );" />

!!! :: attention, dans cet exemple, lors de l'appel via 'afterFinishInternal' du second effet Effect.Shrink() pour réduire l'élément DOM 'test_2', il est obligé de passer par une disparition 'manuelle' de 'test_1' qui malgré les options précisées (ndr : 'restoreAfterFinish' par exemple) ne semble pas faire disparaître l'élément DOM (ndr : firefox 1.5.0.9 le 08/01/2007).

: 07/01/2007 23:53:34 | : Scriptaculous, Scriptaculous.js, Effect.Shrink, Shrink, Effect, CombinationEffects, multibrowser, comptatibility, visibility, opacity, filter, disparition, réduc,

Aucun commentaire enregistré