Jquery 如何设置此.toggle（）的移动动画？

我写了这段代码，使菜单消失，并为侧桌留出空间。我已经实现了我想要的，但我需要让它更华丽。我注意到当我点击时。在绿色分区扩展之前，有一个位置跳跃。我希望能够展示整个运动过程。我尝试过CSS

转换：所有2个
，但似乎不起作用

我很想看到像幻灯片一样的全球过渡

这里有一把小提琴：

最终更新：

仍然不是一个完美的解决方案，但这应该足够好，让你去。不过，在这之后我得开始自己的工作了。我使用了一个容器类，并在子元素上抛出了CSS转换。然后在
.container
上执行一个简单的
.toggleClass（）


更新：

如果您包括jQuery UI（如果您不需要，我不建议这样做），那么
.addClass（）
，
.removeClass（）
，和
.toggleClass（）
在这样的持续时间内使用第二个参数

否则，最好依靠CSS转换。（当然可以清理，但有效）：


直接从jQuery文档：

.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);    
});

这完全取决于你想要什么。。。jQuery有各种各样的动画功能，很简单，比如使用
slideUp（）
：对不起，这是错误的小提琴。。。它没有更新。。。现在是。。我需要绿色运动的动画div@ciaoben你能更详细地解释你想要什么或期望什么吗？绿色的“表格”是否应该随着蓝色的“菜单”的缩小而扩大？还是绿色的“桌子”应该随着蓝色的“菜单”缩小而滑动？对预期或应该发生的事情有一个清晰、简洁的解释可能有助于提供一个完美满足您需求的解决方案。我希望看到绿色的“表格”幻灯片，而蓝色菜单消失！在全球范围内，我希望实现类似的目标：对不起，但我注意到小提琴是错的！真实的例子更复杂，我现在已经更新了小提琴。我需要的动画是在绿色分区上，然后是globabally。对不起，但它不能解决我的问题。。。。我仍然看到绿色的跳水运动员从最初的位置“跳跃”到最后的位置。--我希望看到它移动而不是跳跃。。。（在全球范围内，我希望看到这样的情况：）这可能要困难得多。我认为您需要一个全局容器，其中包含一个从一个状态到另一个状态的类更改。然后您可以对这个类更改进行转换。现在你必须独立地改变两个类（两个不同的动画），并确保动画完美地排列在一起。你能在我的小提琴中给我举个例子吗？我试过了，但不行。。我尝试使用容器分区。。但没有结果
$('.sidebar').on('click',function () {
    $('.sidebar').toggle(1000);    
});