Jquery animate（）とGoogle Chromeの問題

Question

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

    }); 
     }); 
     }); 
} 

Answer 1

問題は、-=と100%で（ここでは、使用中のpx性質対100%スタイルleft CSSプロパティでありますクロムはそれを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、このバージョンはクロスブラウザを動作します。