Jquery animate() 和 google chrome 问题

我在 Google Chrome 中使用 jquery 和 animate() 时遇到问题。 我有一个最初隐藏的盒子，位于屏幕的右侧。 当单击一个框时，隐藏的框变得可见并从右到中心动画，它停止并闪烁，然后它开始再次移动到屏幕的左侧并消失。 这个东西适用于 Explorer 和 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%"); 
 
    }); 
        }); 
        }); 
} 

请您参考如下方法:

问题是这里使用的 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 
            }); 
        }); 
    }); 
} 

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