Jquery animate() y google chrome issues

Question

Tengo un problema con jquery y animate() en google Chrome. Tengo una caja que inicialmente está oculta y ubicada a la derecha, fuera de la pantalla. Cuando se hace clic en un cuadro, el cuadro oculto se vuelve visible y se anima desde la derecha hacia el centro, se detiene y parpadea, y luego vuelve a moverse hacia el lado izquierdo de la pantalla y desaparece. Esto funciona en Explorer y Firefox pero no en Chrome.

Este es el enlace: http://test.gianlucaugolini.it/4545.html

Y este es el código:

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

El tema es las 100% estilo left propiedades CSS vs los px propiedades en uso aquí (con -= y 100%, Chrome lo interpreta como 0 píxeles sin un valor válido ... lo que significa que está funcionando, pero a la izquierda del área visible).

Para eliminar el problema entre navegadores, recomiendo seguir con uno u otro ... y como desea animar en un estilo -=, diría que los píxeles son el camino a seguir aquí.

Aquí ha cambiado su ejemplo para que lo que establece el left basado en el ancho de contenedores:

$(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, esta versión va a funcionar a través del navegador.