对于> 1000px的值，向左动画图像不起作用

Question

This is my .animate function

$(document).ready(function () {
    $('#slide').click(function () {
        $('#2guns').animate({
            left: 1000
        }, 10000);
    });
});

And this is the element I'm animating

<div class="content">
    <button id="slide">slide</button>
    <img src="/home/varun/Documents/Crown/images/line.png" id="2guns" STYLE="position:absolute;left:1293px;">
</div>

When I increase this:

 $('#2guns').animate({left: 1000},10000);

to

$('#2guns').animate({left: 2000},10000);

It starts moving to the right.

I wan't to move the image beyond the left side of the screen.

Answer 1

Works fine, try to reduce to animation length to something more immediate like 1000

$('#guns').animate({
left: 2000
}, 1000);

http://jsfiddle.net/xWEPV/3/

Answer 2

It starts moving to the right.

I wan't to move the image beyond the left side of the screen.

Then you would have to use negative coordinates, similar to the below:

$(document).ready(function () {
    $('#slide').click(function () {
        $('#2guns').animate({
            left: -1000 // should be at least the same of higher than the actual width of your image if you want it to go all the way to the left until it is gone
        }, 7000);
    });
});

---

DEMO - Moving the image to the left from the right

---

The top-left corner of your browser would be the (0, 0) coordinate.

If you want to move something to the left until it is moving outside the screen you need to specify a negative value. You also need to consider the width of the image if you want the image to completely disappear to the left.

For example if the image is 100px in length then you would have to specify at least -100 to ensure it is moved off-screen to the left.

Answer 3

Francois's answer is correct (would upvote, but I'm too much of a n00b here even to do that) - just to clarify it a bit. The CSS properties left, right, top and bottom refer to the distance in pixels (or ems or whatever) from the left, right, top and bottom of the containing element.

Positive values move the styled element further into the container element, away from the border; negative values move it in the opposite direction.

The odd behaviour in your code stems from the fact that your initial style tag has a left value of 1293px - putting the img 1293px to the RIGHT of the left edge of the containing element. When your initial jQuery handler sets left to 1000px, that moves it 293px to the left. If you were to set it to 2000px, on the other hand, it would move the element 707px to the RIGHT. Hence the apparently 'inconsistent' behaviour.