2

这是我的.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);

它开始向右移动。

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

4

3 回答 3

0

工作正常，尝试将动画长度减少到更直接的东西，比如 1000

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

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

于 2013-09-10T12:28:19.933 回答
0

它开始向右移动。

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

然后你将不得不使用负坐标，类似于下面：

$(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);
    });
});

演示- 将图像从右侧移动到左侧

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

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

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

于 2013-09-10T12:31:36.283 回答
0

弗朗索瓦的回答是正确的（会投赞成票，但我在这里太过分了）——只是为了澄清一点。CSS 属性 left、right、top 和 bottom 指的是距包含元素的左、右、上和下的像素（或 em 或其他）的距离。

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

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

于 2013-09-10T12:44:48.480 回答