使用animate()将一个div从右向左滑动

Question

我想让一个名为'.whole'的 div 元素执行动画（从右侧滑入到左侧）。

jQuery

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

.r2 { right: 200px }

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

- Nagaraj Chandran

---

你使用 animate 的尝试效果怎么样？ - MarioDS

我不知道如何使用它 :)我只想将 .whole 进行动画处理（从右侧滑入到左侧） - Nagaraj Chandran

Answer 1

这应该可以工作：

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

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

工作中的JSFiddle

为了说明：该函数接受一个JS对象的属性，如下所示：

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

你也可以将其分配给一个变量并将其传递给animate：

var cssProperties = { right: '200px' }

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

您可以在文档中找到其他可读参数。

- MarioDS

---

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