Discussion :

[Soundboy39]

Bonjour à toutes et tous !

Me revoilà avec une nouvelle question ! Je recherche à faire un effet fadeIn sur l’ensemble de mon 'body' au chargement de la page.

J'ai réussi à la faire avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(document.body).fade('in');

Le soucis c'est que j'aimerai paramétrer la durée de l'animation et éventuellement le type... et je n'arrive pas à le faire avec ce code.

Alors j'ai essayé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
bodyFx = new Fx.Tween($(document.body), {
	property: 'visibility',
	duration: 500, 
	//transition: Fx.Transitions.Quart.easeInOut,
	//link: 'chain'
});
 
bodyFx.start('hidden', 'visible');

Quand j’exécute ce code le CSS du body est bien modifier mais de manière brutale, sans transition...

Quelqu'un a t'il des infos sur cette méthode ?? Ou une autre astuce pour faire un effet fadeIn avec mootools ??

Merci d'avance pour votre aide et bonne fin de journée !

[NoSmoking]

Bonjour,
je dirais qu'une petite lecture devrait suffire
http://javascript.developpez.com/faq...page=formTween

[NoSmoking]

je rajouterais, pas vu à première lecture, qu'une transition sur la propriété visibility n'a pas de sens dans la mesure où les valeurs quelle peut prendre sont ON/OFF, non graduelle de x à y.
Il serais plus judicieux de faire varier l'opacity, comme le fait la méthode fade.

[Soundboy39]

Merci pour ta réponse NoSmoking !

Effectivement avec opacity ça fonctionne mieux...

Par j'aimerai faire un tween sur une margin-left, j'ai donc faite ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
indexSlide = new Fx.Tween(left_index, {
    property: 'margin-left',
    duration: 800, 
});
indexSlide.start('margin-left', 0);

J'ai le même problème qu'au départ, le style est bien changé mais de manière brutale.
Je pense, et je ne crois pas me tromper, que cela vient du faite que ma marge de départ à une valeur négative.

Dans ce cas comment je pourrais procéder ?? Sachant que j'aimerais faire glisser un élément de l’extérieur de l'écran vers l'intérieur, tout en évitent d'utiliser des positions "absolute".

Merci d’avance pour l'aide et bonne journée !

[NoSmoking]

Je pense, et je ne crois pas me tromper, que cela vient du faite que ma marge de départ à une valeur négative

Non! Il faut utiliser les méthodes avec la bonne syntaxe

indexSlide.start('margin-left', 0);

dans cette façon d'écrire le 1er paramètre est la valeur de départ et le 2nd la valeur d'arrivée.

Pour n'indiquer que la valeur d'arrivée il ne faut passer qu'un paramètre indexSlide.start( 0);, la valeur de départ étant dans ce cas la valeur de la propriété au moment du lancement de l'action.