Discussion :

[latour500]

Bonjour à tous,

Je vous explique mon soucis (certainement simple)

j'ai le code mootools suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
window.addEvent('domready', function(){
 
 
	$('slider').morphObject = new Fx.Morph($('slider'), { transition: 'sine:in'}); 
 
    $('slider').addEvent('mouseenter', function(e){
		e = new Event(e);
		$('slider').morphObject.start('.css_end');
		e.stop();
	});
 
	 $('slider').addEvent('mouseleave', function(e){
		e = new Event(e);
		$('slider').morphObject.start('.css_start');
		e.stop();
	});
 
 
 
 
});

en css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.css_start
{
	height: 13px;
	width: 100px;
	border: 1px solid #000000;
	margin-top: 50px;
}
.css_end
{
	height: 50px;
	width: 100px;
	border: 1px solid #000000;
	margin-top: 0px;
}

En html

Code :

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

1
2
 
<div id="slider" class="css_start">mon test ici</div>

ce qui se passe c'est quand je rentre dans ma div, cela change doucement ma div en margin-top et height, quand j'en sors cela fait pareil mais à l'inverse (réduit la hauteur et le margin-top), mais (oui il y a un 'mais') , si je sors vite de ma div, ma div reste telle quelle et le 'mouseleave' n'est pas pris en compte, j'aimerai éventuellement mettre un chrono qui quand il n'y a plus de souris dans la div lance la fonction ...start...
Enfin une solution qui lance bien ma fonction ...start... lorsque plus de souris dans la div (slider).
Je débute en Mootools

voilà merci d'avance si quelqu'un peut m'aider

[vermine]

Bonjour,

Lorsque l'on utilise un objet de type Fx, il faut bien comprendre que nous lançons ce que j'appelle une "transition". Cette transition est un ensemble fermé qui a un début et une fin (on pourrait faire l'analogie avec une transaction en base de données). Dans votre cas, vous faites interagir deux transitions sur un même élément. C'est un peu comme si deux personnes vous racontaient chacune une blague en même temps. Soit vous n'en écoutez qu'une. Soit vous essayez d'écouter les deux. Soit vous leur expliquez que c'est chacun son tour. Avec les transitions, c'est pareil. Vous avez l'option link qui permet de préciser que :

• la première transition en cours prime sur toutes les autres. Si la souris entre dans la <div>, toutes les transitions qui auront lieu durant cette transition seront tout simplement ignorées (ignore) ;

• la dernière arrivée prime sur toutes les autres. Votre première transition n'est pas finie ? Tant pis. Elle est annulée et c'est la nouvelle transition qui démarre (cancel) ;

• les transitions se mettent dans une file d'attente. C'est chacune son tour (chain).

Par défaut, c'est la valeur ignore qui est choisie. Je vous propose donc d'utiliser la dernière possibilité. Celle du chaînage. :

Code :

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

$('slider').morphObject = new Fx.Morph($('slider'), { transition: 'sine:in', link: 'chain'});

[latour500]

Bonjour,

Merci de votre réponse et de ces explications claires et précises,
j'ai appliqué votre méthode, hélas, maintenant cela joue les yoyo,
ma méthode n'avait pas ce genre de soucis, sauf que parfois cela ne se lançais pas le code (pour réduire la div)

Code :

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

1
2
 
$('slider').morphObject.start('.css_start');

(je précise que ma div est un genre d'onglet avec des champs à l'intérieur (enfin par la suite).
Donc c'est pour ça que je pensais à une 'tempo' de controle de souris dans la div et lancer du coup la fonction

Code :

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

$('slider').morphObject.start('.css_start');

Mais j'ai bien compris ce que vous vouliez m'indiquer.

Enfin pour que cela ne fasse pas yoyo j'imagine que je dois faire quelque chose, là à mon avis il met en 'queue' les actions à faire et c'est ce qui donne l'effet yoyo (même quand on bouge pas la souris)

Merci d'avance

[latour500]

Re,

Bon je retire ce que j'ai dis, ça marche parfaitement avec des valeurs de margin-top correcte, là c'était la div qui sortait de la position du curseur et donc avait cet effet de yoyo.

Donc merci beaucoup pour votre réponse, simple et efficace.

Bonne journée à vous

(du coup je vais acheter le livre que vous avez en lien sur Mootools)

[vermine]

Oui, j'avais constaté cet effet de yoyo qui est effectivement dû au fait que le curseur se voit sortir bien malgré lui de la zone de l'élément. J'avais pensé que j'avais mal implémenté votre exemple.

(du coup je vais acheter le livre que vous avez en lien sur Mootools)

J'en serai ravi.

[latour500]

Re,

J'ajoute un complément finalement j'ai dû utiliser (du fait que ma div est une sorte d'onglet qui se developpe au survol de son en tête.

Code :

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

1
2
3
 
 
$('slider').morphObject = new Fx.Morph($('slider'), { duration: 'long', transition: 'sine:out', link: 'cancel'});

En tout cas merci de votre réponse, sans celle-ci j'aurai cherché des solutions beaucoup plus complexe.

(j'ai trouvé ma réponse grace au livre 'découvez mootools' qui explique les différences possibilités que vous aviez citées entre 'chain' 'cancel' 'ignore' )

[vermine]

Vous avez bien fait, je pense également que "cancel" est plus adapté dans votre cas.

(j'ai trouvé ma réponse grace au livre 'découvez mootools' qui explique les différences possibilités que vous aviez citées entre 'chain' 'cancel' 'ignore' )

Alors le but du livre est atteint.