使用 animate() 从右向左滑动 div答案

【问题标题】：Slide a div from right to left using animate()使用 animate() 从右向左滑动 div
【发布时间】：2013-04-18 23:20:58
【问题描述】：

我想要一个 div '.whole' 进行动画处理（从右向左滑动）

jQuery

$('#menu').click(function() {
      $('.whole').toggleClass('r2');
      $('#slideMenu').toggle();
});

.r2 { right: 200px }

我无法正确使用函数 animate()。

【问题讨论】：

那么，您对animate 的尝试是什么样的？
我不知道如何使用它 :) 我只想为 .whole 制作动画（从右向左滑动）

标签： jquery jquery-animate

【解决方案1】：

这应该可行：

$('#menu').click(function(event) {
      event.preventDefault(); // because it is an anchor element
      $('.whole').animate({
          right: '200px'
      });
      $('#slideMenu').toggle();
});

但是您的 position 属性应该已经在 CSS 中设置，否则您可能无法得到您所需要的。

Working JSFiddle

解释一下：函数接受一个属性的JS对象，像这样：

{
    right: '200px',
    somethingElse: 'value',
    myboolean: true
}

您也可以将其分配给一个 var 并将其传递给 animate：

var cssProperties = { right: '200px' }

$('#menu').click(function() {
  $('.whole').animate(cssProperties);
});

您可以在documentation 中传递其他可阅读的论点。

【讨论】：

我真的很喜欢这个例子，它没有使用绝对位置，太棒了！！