Jquery animate() and google chrome issues

问题

i'm having a problem with jquery and animate() in google Chrome. I have a box which is initially hidden and positioned on the right outside the screen. When a box is clicked the hidden box becomes visible and animate from right to the center, it stops and blink, then and then it starts moving again to the left side of the screen and disapper. This thing works on Explorer and Firefox but not on Chrome.

This is the link: http://test.gianlucaugolini.it/4545.html

And this is the code:

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

    });
        });
        });
}

回答1:

The issue is the 100% style left CSS properties vs the px properties in use here (with -= and 100%, chrome is interpreting it as 0 pixels absent a valid value...meaning that it's working, but way off to the left of the visible area).

To eliminate the issue cross-browser, I recommend sticking with one or the other...and since you want to animate in a -= style, I'd say pixels is the way to go here.

Here's your example changed so that it that sets the left based on the container width:

$(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, this version will work cross-browser.

来源：https://stackoverflow.com/questions/7455831/jquery-animate-and-google-chrome-issues

标签

jquery

google-chrome

jquery-animate