slide tant que mousover

Version imprimable

10/08/2010, 14h07
SpaceFrog

slide tant que mousover

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 ?
10/08/2010, 15h39
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...
10/08/2010, 16h15
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...

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

Apparement le .stop() est générique.
Citation:
We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:
Code:

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:

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); });

10/08/2010, 16h48
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 ...
10/08/2010, 16h54
Loceka

Et c'est pas possible de récupérer la valeur de "duration" et de faire justement ton 300 - valeur ? :koi:
11/08/2010, 08h27
SpaceFrog

Non en fait c'est tout un beans parcequ'il faudrait que je recupère à chaque fois le offset.left() qui est issu de l'animate :(
Mais je vais ouvrir un autre post parce que j'ai aussi un souci d'incrément d'une variable de limite de déplacement qui varie de façon anormale :(

Merci de ta proposition Loceka ;)

Bonsoir

Si j'ai bien compris, exemple : [EDIT] :oops:

Code:

1
2
3
4
5
6
7
/*
 * J'oublie toujours one()
 * L'action ne se produit qu'une seule fois !
 */
$("#imgID").one("mouseenter", function(){
	$(this).animate({"left": "+=300px"}, 3000);
});

Merci Daniel, mais j'ai été obligé d'abandonner le animate au profit d'une simple modification de 1 pixel du css left...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="JQScripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JQScripts/jquery.mousewheel.min.js"></script>
<title>Calculateur de conduits d'air</title>
 
<style type="text/css">
html, body {
	height:100%;
	width:100%;
		}
body {
	margin:0;
	padding:0;
	overflow:hidden;
	}
 
#cont {
     position:relative;
	width:1024px;
	height:475px;
	margin: 0 auto;
	overflow: hidden;
	}
#face, #slider {
      position:absolute;
	top:0;
	}	
#controls {
	position:relative;
	width:200px;
	top:20px;
	margin-left: auto;
	margin-right:auto;
	overflow:hidden;
	}		
.sbutton{ width:40px;}
</style>
 
<script type="text/javascript">
var hoverInterval;
var limit=0
 
 
function goLeft() {
	 if(limit<420){
	      ++limit
		$("#slider").css({'left':limit+'px'})
		}   
	}
 
 
function goRight() {
	 if(limit>-525){
	 	limit=limit-1;
		$("#slider").css({'left':limit+'px'})
		}
	}
 
//____________READY
 
$(function(){
//__________________ LEFT
    $("#goleft").hover(
        function() {
            // call doStuff every 100 milliseconds
            hoverInterval = setInterval(goLeft, 100);
        },
        function() {
            // stop calling doStuff
            clearInterval(hoverInterval);
        }
    );
 
//__________________ FAST LEFT
    $("#gofastleft").hover(
        function() {
            // call doStuff every 10 milliseconds
            hoverInterval = setInterval(goLeft, 1);
        },
        function() {
            // stop calling doStuff
            clearInterval(hoverInterval);
        }
    );
 
 
//__________________ RIGHT
    $("#goright").hover(
        function() {
            // call doStuff every 100 milliseconds
            hoverInterval = setInterval(goRight, 100);
        },
        function() {
            // stop calling doStuff
            clearInterval(hoverInterval);
        }
    );
 
//__________________ FAST RIGHT
 
    $("#gofastright").hover(
        function() {
            // call doStuff every 100 milliseconds
            hoverInterval = setInterval(goRight, 5);
        },
        function() {
            // stop calling doStuff
            clearInterval(hoverInterval);
        }
       );
 
$("#face").mousewheel(function(event, delta) {
	if (delta < 0) {
		     goRight()
 
	}else if (delta > 0){
			goLeft();
	}
});
 
});
 
</script>
</head>
 
<body>
<div id="cont">
<img id="slider" src="pics/slider.png" alt="ouest ventil"/>
<img id="face" src="pics/face.gif" alt="ouest ventil" />
</div>
<div id="controls">
<input type="button" class="sbutton" id="gofastright" value="<<" />
<input type="button" class="sbutton" id="goright" value="<" />
<input type="button" class="sbutton" id="goleft" value=">" />
<input type="button" class="sbutton"  id="gofastleft" value=">>" />
<input type="button" class="sbutton"  id="gofastleft" value=">>" />
</div>
</body>
</html>

En effet les limites de déplacement devenaient volatiles avec l'animate.
le mouseout stoppant le setInterval mais pas l'animate :(
Du coup je gagne en précision des limites, mais je perd en vitesse possible de déplacement.

13/08/2010, 00h31
danielhagnoul

Bonsoir

Je trouve l'idée intéressante :ccool:.

J'ai joué avec toute la soirée et cela a donné (mais non pas un plug-in :mouarf:) 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...
13/08/2010, 08h23
SpaceFrog

:ccool:

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 ...
13/08/2010, 09h19
danielhagnoul

Bonjour

Question : pile des "animate" ?

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