Jquery animate（）和谷歌浏览器问题

我在google Chrome中遇到了jquery和animate（）的问题。 我有一个最初隐藏的盒子，位于屏幕右侧。 单击一个框时，隐藏框变为可见，并从右侧到中心动画，它会停止并闪烁，然后再开始再次移动到屏幕的左侧并消失。 这个东西适用于资源管理器和Firefox，但不适用于Chrome。

这是链接： http ： //test.gianlucaugolini.it/4545.html

这是代码：

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

Answer 1

问题是100%样式的left CSS属性与此处使用的px属性（使用-=和100% ，chrome将其解释为0像素，没有有效值…意味着它正在工作，但是向左转可见区域）。

为了消除跨浏览器的问题，我建议坚持使用其中一个……并且因为你想用-=风格进行动画制作，我会说像素是这里的方法。

这是您的示例已更改，以便根据容器宽度设置left ：

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

你可以在这里测试一下 ，这个版本可以跨浏览器工作。