Discussion :

[boutmos]

bonjour,

Je suis entrain de développer un slideShow avec l'aide de Jquery. Ça avance plutôt bien et vite mais là je me heurte a un bug sous IE6&7 (pas testé IE8)

Lorsque j'utilise cette fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function slideLeft(){
	marge = $("#items").css("marginLeft");
	marge = parseInt(marge);
	marge = marge-164;
	marge = marge+"px";
	$("#items").css("position", "relative");
 
	$("#items").animate({
		marginLeft : marge
	}, 350 );
 
	$("#items").css("position", "static");
}

Dans le animate, le fait d'affecter une variable a marginLeft; cela me fait planter Jquery sous IE.

Comment affecter cette propriété avec une variable proprement ? Merci

[boutmos]

J'ai peut etre une piste; j'ai placé un alert(marge) juste apres marge = marge+"px";

et sous IE , mon alert m'affiche NaNpx

Not a Number :/

[boutmos]

en fait cela vient de

Code :

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

marge = $("#items").css("marginLeft");

qui sous IE, me retourne la valeure AUTO, alors que j'attends une valeur string suivie de px que je converti.

et donc la conversion via le parseInt ne peut pas s'effectuer

[boutmos]

Bon j'ai compris.

dans le CSS , ma div #items etait definie ainsi :

Code :

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

1
2
3
4
 
#items {
	width: 1600px;
}

et donc pour FF, Safari , implicitement les marges sont a 0px;

tandis que sous IE, elles sont définies sur auto.

J'ai donc explicitement initialisé mes marges dans mon CSS et çà fonctionne :

Code :

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

1
2
3
4
5
#items {
	margin: 0px;
	width: 1600px;
}

[boutmos]

Si j'avais lu ce passage plus tot, j'aurais pu eviter mon erreur :

Depuis jQuery 1.2, vous pouvez animer les propriétés en utilisant les mesures em et % (lorsqu'elles sont applicables).De plus, vous pouvez créer des animations relatives en utilisant "+=" ou "-=" devant la valeur de la propriété. Cela va faire évoluer l'élément positivement ou négativement depuis sa position actuelle.

Mais hélas je n'arrive pas appliquer ceci a mon code :

Code :

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

1
2
3
4
	$("#items").animate({
		marginLeft += 164
	}, 150 );

Avez vous deja utilisé cette notation dans un .animate ?

[boutmos]

c'est bon c'est ainsi :

$("#items").animate({
marginLeft : "+=164"
});

[lylynath]

Salut,

Je vois que ce topic date un peu, mais en désespoir de cause je vais quand mm poster ma question...
Je suis en train de créer une animation jquery et je me retrouve à utiliser la

Code :

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

1
2
3
4
fonction animate comme ceci (#page_1_3 etant une image) : 
$("#page_1_3").animate({ 
     marginLeft : "-=280"
}, 500 );

Sous firefox nickel, pas de pb mon image bouge et se pose où il faut ! sauf que sous ie8 mon élément disparait ! il se déplace bien vers la gauche mais ne reste pas affiché... quelqu'un aurait deja vu un pb comme ça ? et surtout quelqu'un aurait trouvé la solution ? ^^

Merci d'avance pour votre aide