11548 sujets

JavaScript, DOM et API Web HTML5

JQuery : problème d'animation avec IE8

Bien le bonjour,

Voici mon problème.
J'ai un site où défilent de gauche à droite des divs, via la fonction .animate.
Sur Firefox, Chrome, et Safari, tout se passe bien, mais sur IE8 (ça semble bon sur IE7), ça n'est pas fluide, les blocs se poussent les uns les autres avant de s'afficher.

Ça donne ça : http://www.raphael-bigot.info


Pour isoler le problème, j'ai refait une version hyperlight avec le strict nécessaire, ici : http://www.raphael-bigot.info/test.html


Voici le code html :

<body>

<ul id="nav_test">
<li>slide 1</li>
<li>slide 2</li>
<li>slide 3</li>
<li>slide 4</li>
</ul>


<div id="content_about"></div>
<div id="content_skills"></div>
<div id="content_works"></div>
<div id="content_contact"></div>

</body>


Les CSS :

body {
	overflow: hidden;
}


#nav_test {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -350px;
	margin-left: -100px;
}

#content_about, #content_skills, #content_works, #content_contact {
	height: 430px;
	width: 765px;
	margin-top: -267px;
	margin-left: -437px;
	position: absolute;
	top: 50%;
	background-color: #0F0;
	}

#content_about {
	left: 50%;	
}

#content_skills {
	left: 150%;
}
#content_works {
	left: 250%;
}

#content_contact {
	left: 350%;
}


Et enfin le code javascript (JQuery) :

$('document').ready(function() {

							
							 $('#nav_test li:eq(0)').click(function() {
													$('#content_about').animate({left: '50%'}, 'slow');
													$('#content_skills').animate({left: '150%'}, 'slow');
													$('#content_works').animate({left: '250%'}, 'slow');
													$('#content_contact').animate({left: '350%'}, 'slow');
															
						
							  });
					  
							  
							  $('#nav_test li:eq(1)').click(function() {
													$('#content_about').animate({left: '-150%'}, 'slow');
													$('#content_skills').animate({left: '50%'}, 'slow');
													$('#content_works').animate({left: '150%'}, 'slow');
													$('#content_contact').animate({left: '250%'}, 'slow');
															
						
							  });
							  
							  $('#nav_test li:eq(2)').click(function() {
													$('#content_about').animate({left: '-250%'}, 'slow');
													$('#content_skills').animate({left: '-50%'}, 'slow');
													$('#content_works').animate({left: '50%'}, 'slow');
													$('#content_contact').animate({left: '150%'}, 'slow');
															
						
							  });
							  
							  
							  $('#nav_test li:eq(3)').click(function() {
													$('#content_about').animate({left: '-350%'}, 'slow');
													$('#content_skills').animate({left: '-150%'}, 'slow');
													$('#content_works').animate({left: '-50%'}, 'slow');
													$('#content_contact').animate({left: '50%'}, 'slow');
															
						
							  });
});


Est-ce que j'ai mal codé qquechose, ou le problème n'est pas vraiment surmontable, imposé par une mauvaise interprétation de certaines fonctions javascript par IE ?


Merci pour votre aide.
Modifié par Ralf (09 Sep 2010 - 12:12)
J'ai fait un truc similaire y'a peu, avec les div alignées en inline-block dans un plus grand bloc, au lieu d'un positionnement absolu

Faut arriver à le faire avaler par IE7- mais sinon ça marche pas mal

EDIT : lien vers un exemple
Modifié par Falafel65 (09 Sep 2010 - 14:59)
Il y a déjà des erreurs js visibles en console (pribablement du à l'ordre d'appel des scripts).
Ta démo (hyperlight) ne fonctionne pas.
Tu peux passer à une version plus récente de jquery.
Essaies de coller cette rustine 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Modifié par paolo (06 Oct 2010 - 10:06)
paolo a écrit :

Ta démo (hyperlight) ne fonctionne pas.

Hm si pourtant, je viens de vérifier.

paolo a écrit :

Essaies de coller cette rustine 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Intéressant, je connaissais pas du tout ce machin.
Avec lui, y a du progrès : l'animation marche bien. En revanche, ça m'a "contré" mon css body {overflow: hidden;}. Par conséquent, j'ai une barre de scroll horizontale.

Maintenant si on peut pas faire mieux, c'est déjà beaucoup mieux qu'avant (et donc merci, au passage).
Sujet clos
Aller à