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

Question

这是我的.animate函数

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

这就是我要设置动画的元素

<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>

当我增加这个时:

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

到

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

它开始向右移动。

我不想将图像移动到屏幕左侧之外。

Answer 1

It starts moving to the right.

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

那么您必须使用负坐标，类似于以下内容:

$(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 - 将图像从右向左移动

<小时/>

浏览器的左上角将是 (0, 0) 坐标。

如果您想将某些内容向左移动直到它移出屏幕，您需要指定一个负值。如果您希望图像完全消失在左侧，您还需要考虑图像的宽度。

例如，如果图像长度为 100px，那么您必须至少指定 -100 以确保将其移出屏幕并移至左侧。