Je m'amuse un peu avec jQuery depuis hier et j'ai eu envie de faire une petite fonction pour zoomer une image au survol de la souris. Ca marche pas mal, mais il y a un petit problème : j'utilise un booléen pour savoir si mon image est zoomée ou non, si je quitte la zone de hover de l'image puis revient rapidement dessus avant la fin de l'animation, le script considère que l'image n'est pas zoomée alors qu'elle y est, du coup on peut étendre l'image à fond juste en bougeant la souris. Et inversement. Pas top ! Je cherche donc un truc du type stopObserving que je placerais en début d'animation ou une propriété genre "busy" applicable à l'image.

D'autre part, j'utilise comme flag la valeur padding de l'image (la première propriété qui n'est venue à l'esprit...). C'est pas génial mais je ne sais pas quoi utiliser d'autre. Y'a t-il une propriété CSS qui pourrait remplir ce rôle ou une autre façon de faire ?

Je précise que j'ai découvert jQuery hier et que je trouve ce truc génial, donc désolé si mes questions sont nazes

Voici le code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var growth = 200;
 
$(".maClasse").mouseenter(function(e) {
	zoomImage(this);
}).mouseleave(function(e) {		
	zoomImage(this);
});
 
function zoomImage(img) {
	var currentWidth, currentHeight, finalWidth, finalHeight, centerTop, centerLeft;
	var topPos = $(img).css("top");
	var leftPos = $(img).css("left");
	var isBig = $(img).css("padding")=="1px";
 
	currentWidth = $(img).width();
	currentHeight = $(img).height();
	centerLeft = parseInt(leftPos + currentWidth/2);
	centerTop = parseInt(topPos + currentHeight/2);
 
	if (isBig) {
		finalWidth = parseInt(currentWidth/(growth/100));
		finalHeight = parseInt(currentHeight/(growth/100));
		topPos = centerTop + parseInt(finalHeight/2) + "px";
		leftPos = centerLeft + parseInt(finalWidth/2) + "px";
		$(img).css({"padding": "0px"})
	} else {
		finalWidth = parseInt(currentWidth*(growth/100));
		finalHeight = parseInt(currentHeight*(growth/100));
		topPos = centerTop - parseInt(currentHeight/2) + "px";
		leftPos = centerLeft - parseInt(currentWidth/2) + "px";
		$(img).css({"padding": "1px"})
	}
 
	$(img).animate({
		top: topPos,
		left: leftPos,
		width: finalWidth + "px"
		}, 700 );
}
Merci de votre aide !