Jquery 动画 - div 跳跃？答案

【问题标题】：Jquery animation - div jumps?Jquery 动画 - div 跳跃？
【发布时间】：2011-12-12 23:05:23
【问题描述】：

我有一个机器人图像，我正尝试使用 JQuery 将其移到屏幕外的左侧。 div 的位置如下：

#robot{
   position:fixed;
   margin-left:800px;
   bottom:-40px;
}

所以，它基本上在中间底部。然后我动画：

$('#robot').animate({left:"-=1000px"},12000,"linear", stopRobotTimer);

它可以工作，但是一旦动画开始，机器人就会跳大约200 pixels left，然后开始 12 秒的动画。

【问题讨论】：

查看是否有填充/边距妨碍您。查看这篇文章以了解有关此特定类型问题的更多信息：jqueryfordesigners.com/animation-jump-quick-tip。

【解决方案1】：

当您使用-=1000 时，首先您更改left 然后开始制作动画。尝试像下面这样更改它

$('#robot').animate({left:"=-200px"},12000,"linear", stopRobotTimer);

【讨论】：

【解决方案2】：

您是否尝试过按字面意思设置预期终点？

$('#robot').animate({left:"-200px"},12000,"linear", stopRobotTimer);

你这样做 -= 在这种情况下应该只导致 -200，因为它是在你的 css 中定义的。

编辑

我的错误 - 我忘了提到你应该将你的 css 声明更改为 left:800px;或将您的动画语句更改为：

$('#robot').animate({marginLeft:"-200px"},12000,"linear", stopRobotTimer);

因为最初你的 css 没有指定“left”而是指定了“margin-left”

【讨论】：