jQuery animate({left:“+=10”}) not working

问题

<script type="text/javascript" src="./Scripts/jquery-1.5.1.min.js"></script>
<script type='text/javascript' >
    $(document).ready(function () {
        $("#start").animate({ left: "+=10px" }, 1000)
            .animate({ left: "-5000px" }, 1000);
    });
</script>

<p id="start">this is some text that i am going to animate </p>

I am racking my brain here as to why this doesn't animate. If I change left to marginLeft it will work as expected and animates. But i am not sure why left doesn't.

Can anyone explain please? I have seen many other scripts doing something similar.

回答1:

For positioning to work, you need to have enabled it by setting the position css property.

Set it to fixed or absolute or relative to work (depending on what you try to achieve)

Quoting from the specs of the position MDC docs property.

Initial value : static

and

static
Normal behavior. The top, right, bottom, and left properties do not apply.

回答2:

You set the position of this <p> to absolute

like: p{position:absolute;} otherwise use marginLeft instead of left

来源：https://stackoverflow.com/questions/5723230/jquery-animateleft-10-not-working