Discussion :

[SpaceFrog]

je souhaite faire translater une image sur le mousover d'un bouton ou image

ergonomie tant que la souris est sur le bouton l'objet bouge
sur le mousout il en bouge plus ...

dois-je faire un setinterval / clearinterval ?
il doit bien y avoir un truc tout fait non ?

[Loceka]

Apparement il y'aurait une propriété "animate" ( http://api.jquery.com/animate/ ) sur les éléments :
http://www.mail-archive.com/jquery-e.../msg10865.html

Je sais pas si ça te convient...

[SpaceFrog]

non l'animate ne convient pas car je ne peux pas stopper l'animation avec un max et un min...

pour le moment ça fonctionne avec un setInterval mais si il y a mieux je suis preneur...

[Loceka]

Et ça ? http://api.jquery.com/stop/

Apparement le .stop() est générique.

We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:

Code Javascript :

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

1
2
3
4
5
$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});

...

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Start animation
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
 
// Stop animation when button is clicked
$("#stop").click(function(){
$(".block").stop();
});
 
// Start animation in the opposite direction
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});

[SpaceFrog]

oui mais le hover ne se declenche qu'une fois

si je fais un premier hover il va translater de 300 par exemple
je le stoppe ...
le second hover refera un animate de 300, or j'ai besoin qu'il continue sur 300 - distance du premier déplacement ...

[Loceka]

Et c'est pas possible de récupérer la valeur de "duration" et de faire justement ton 300 - valeur ?

[danielhagnoul]

Bonsoir

Je trouve l'idée intéressante .

J'ai joué avec toute la soirée et cela a donné (mais non pas un plug-in ) une variante pour plusieurs images qui s'appelle spacefrogSlide.php (rappel, avec Chrome et Firefox : CTRL-U pour voir le code).

La vitesse de déplacement est satisfaisante avec Chrome 6 et Firefox 3.6.8 et sous IE 8 c'est moins rapide mais...

[SpaceFrog]

L'idée pour l'application finale est en fait de jouer sur les transparences. Sans les images c'est un peut difficile à imaginer, mais on peut se le représenter sous le principe d'une règle à calculs.

Je regardais hier une cheatsheet JQuery et en bas dans un coin j'ai vu quelque chose qui pourrait faire mon bonheur. Il parait que l'on peut mettre la main sur la pile des animate en cours et les stopper. Il me suffirait de mettre l'incrément dans le callback et ça devrait regler la volatilité des limites ...
Je testerais ça lundi ...

[danielhagnoul]

Bonjour

Question : pile des "animate" ?

Réponse : http://api.jquery.com/animated-selector/