Problemy z jquery animate() i Google Chrome

Question

Mam problem z jquery i animate() w Google Chrome. Mam pudełko, które jest początkowo ukryte i umieszczone po prawej stronie ekranu. Po kliknięciu na pole ukryte pole staje się widoczne i animowane od prawej strony do środka, zatrzymuje się i miga, a następnie, a następnie ponownie przesuwa się na lewą stronę ekranu i znika. Ta funkcja działa w przeglądarkach i Firefoksie, ale nie w Chrome.

tym odnośnikiem: http://test.gianlucaugolini.it/4545.html

I to jest kod:

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

Kwestia jest 100% styl left właściwości CSS vs px właściwości stosowanych tu (z -= i 100%, chrome interpretuje je jako nieobecne w prawidłowej wartości ... co oznacza, że ​​działa, ale znajduje się z lewej strony widocznego obszaru).

Aby wyeliminować problem z przeglądarką, polecam trzymać się jednego lub drugiego ... a ponieważ chcesz animować w stylu -=, powiedziałbym, że piksele to sposób, aby przejść tutaj.

Tu masz przykład zmieniony tak, że to, że ustawia left na podstawie szerokości kontenera:

$(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, ta wersja będzie działać cross-browser.