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

Question

我在谷歌浏览器中遇到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属性VS在这里使用的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 
      }); 
     }); 
    }); 
} 

You can test it here，这个版本将工作跨浏览器。