Problèmes Jquery animate () et Google Chrome

Je rencontre un problème avec jquery et animate () dans Google Chrome. J’ai une boîte qui est initialement cachée et positionnée à droite en dehors de l’écran. Lorsque vous cliquez sur une case, la case cachée devient visible et s’anime de la droite vers le centre. Elle s’arrête et clignote. Cette chose fonctionne sur Explorer et Firefox, mais pas sur Chrome.

C’est le lien: http://test.gianlucaugolini.it/4545.html

Et voici le code:

function test(){ var scaleX = $("#container").width()/2 + $("#hoverText").width()/2; $("#hoverText").animate({visibility:"visible",opacity:"show",left:"-="+scaleX+"px"},500,function(){ $("#hoverText").effect("highlight",{duration:1000},1500,function(){ $("#hoverText").animate({visibility:"hidden",opacity:"hide",left:"0%"},500,function(){ $("#hoverText").css("left","100%"); }); }); }); }

Le problème concerne les propriétés CSS de style left 100% rapport aux propriétés px utilisées ici (avec -= et 100% , chrome l’interprète comme étant une valeur de 0 pixel, valeur absente … ce qui signifie que cela fonctionne, mais à gauche. de la zone visible).

Pour éliminer le problème multi-navigateur, je vous recommande de vous en tenir à l’un ou à l’autre … et comme vous souhaitez animer dans un style -= , je dirais que les pixels sont la solution.

Voici votre exemple modifié pour qu’il définisse la left fonction de la largeur du conteneur:

 $(document).ready(function() { $("#header_title").bind("click",test); }); function test(){ var cw = $("#container").width(); var scaleX = cw/2 + $("#hoverText").width()/2; $("#hoverText").css("left", cw).animate({ visibility: "visible", opacity: "show", left: "-="+scaleX+"px" }, 500, function() { $(this).effect("highlight",{ duration:1000 }, 1500, function() { $(this).animate({ visibility: "hidden", opacity: "hide", left: 0 }); }); }); }

Vous pouvez le tester ici , cette version fonctionnera sur plusieurs navigateurs.