Question

so I have a div with the following css:

#MyDiv {
    position: absolute;
    overflow: visible;
    top: 0px;
    right: 50%;
    width: 49%;
    height: 99%;
    min-width: 250px;
    min-height: 400px;
    max-width: 400px;
    max-height: 500px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin: 0 auto;
    padding: 0px;
}

and i’m animating it to the right with jquery by 800 pixels. In firefox the final position is the desired one, however in chrome and opera it’s wrong.

    alert($("#MyDiv").position().left);
    $("#MyDiv").animate({left: "+=" + 800 + "px"}, 1000, "linear", function() {
        alert($("#MyDiv").position().left);
    });

in firefox the initial left position is 23 (first alert) and the final 823 (second alert)
in chrome and opera the final position is 800

am i doing something wrong? there is a requirement to keep the css unchanged.

p.s. ie8 has also some issues but to a lesser extent than chrome and opera

thanks in advance.

edit jsfiddle : http://jsfiddle.net/Q8K2R/

Answer 1

Other way is to setup css left attribute, because animation works with css, and here is no guarantie, that left attribute contains correct calculated data, so fix can be like

var mydiv=$("#MyDiv");
mydiv.css({left: mydiv.position().left});

before animate
DEMO