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，這個版本將工作跨瀏覽器。