了解jquery的动画方法答案

【问题标题】：Understanding jquery's animate method了解jquery的动画方法
【发布时间】：2013-08-19 07:40:15
【问题描述】：

使用以下代码，我可以从右向左“滑动”一个 div：

$("#myDiv").animate({ right: 300 }, 500);

虽然这有效，但我不明白发生了什么。在我的 html 中，我没有设置“正确”的 css 属性，所以我的 Div 恰好在任何地方。那么究竟发生了什么？ jquery 是否采用我的 div 并开始将“right”属性最初设置为 0 并将其递增 1 直到达到 300 的值？然而在 jquery 网站上的代码示例中，他们显示了这一点：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

在本例中，“left”属性以 50 步递增。这就是我感到困惑的地方。在我的示例中，“right”属性具有固定值，但 jquery 似乎以 1 为增量递增，而在他们的示例中，它以 50 为增量递增。

【问题讨论】：

标签： jquery-animate

【解决方案1】：

在示例中它增加了 50，而不是步数是 50。所以如果是 200，它将是 250。

在您的情况下，它将是 300，并且在它之前没有设置为 0。

是的，内联 right css 属性将增加到 300。

【讨论】：

因此，如果我理解正确，如果从未设置过像“left”这样的属性，然后您为 animate 方法指定 50，jquery 最初以零开始该值，并在动画持续时间内将其递增一直到达到 50。
是的，但是如果你在动画之后检查html元素可以看到结果。

【解决方案2】：

在 JQuery 示例中，每次单击 #clickme 时，左侧位置都会移动 +50 像素。

在您的示例中，无论调用多少次，它都会动画一次到 300 像素（相对于父 div）。

【讨论】：