jquery - 如何为这个 .toggle() 的运动设置动画？

Question

我已经编写了这段代码来使菜单消失并为横向表格留出空间。我已经实现了我想要的，但我需要让它更漂亮。我注意到当我点击时。在绿色div展开之前，有一个位置的跳跃。我希望能够展示运动的整个过程。我试过使用 CSS transition: all 2s 但它似乎不起作用。

我希望看到像幻灯片一样的全局过渡。

这里是 fiddle :

JSFiddle

Answer 1

最后更新:

仍然不是一个完美的解决方案，但这应该足以让您继续前进。不过，我必须在这之后开始自己的工作。我使用了一个容器类并在子元素上添加了 CSS 转换。然后只是 .container 上的一个简单的 .toggleClass()。

JSFiddle

更新:

如果您包含 jQuery UI(如果您不需要，我不推荐)，然后 .addClass()、.removeClass() 和 .toggleClass() 在持续时间内采用第二个参数，如 JSFiddle .

否则，您最好依赖 CSS 转换。 JSFiddle (肯定可以清理，但有效):

.aa {
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}

---

直接来自 jQuery .toggle()文档:

.toggle( [duration ] [, complete ] )
  duration (default: 400)
  Type: Number or String
  A string or number determining how long the animation will run.

您可以为动画需要多长时间添加一个时间。这里我设置为 1 秒:

$('.sidebar').on('click',function () {
    $('.sidebar').toggle(1000);    
});

JSFiddle