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

工作正常，尝试将动画长度减少到更接近1000的状态

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

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

Answer 2

它开始向右移动。

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

然后你必须使用负坐标，类似于下面的内容：

$(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才能确保将其移出屏幕左侧。

Answer 3

弗朗索瓦的回答是正确的（会投票，但我甚至在这里做的太多了） - 只是为了澄清一点。左侧，右侧，顶部和底部的CSS属性是指包含元素的左侧，右侧，顶部和底部的像素距离（或ems或其他）。

正值将样式元素进一步移动到容器元素中，远离边界;负值将其向相反方向移动。

您的代码中的奇怪行为源于您的初始样式标记的左值为1293px - 将img 1293px放置到包含元素左边缘的右侧。当你的初始jQuery处理程序设置为1000px时，它将它向左移动293px。另一方面，如果你将它设置为2000px，它会将元素707px移动到右边。因此，显然是“不一致”的行为。

向左移动图像不适用于值> 1000px

3 个答案: