我已经编写了这个代码,用于使菜单消失并为侧面表留出空间。我已经实现了我想要的东西,但我需要让它变得更加漂亮。我注意到,当我点击。在绿色div扩大之前,有一个跳跃的位置。我希望能够展示整个运动过程。我尝试过使用CSS transition: all 2s
,但它似乎不起作用。
我希望看到一个类似幻灯片的全球转型。
这里有一个小提琴:
答案 0 :(得分:0)
最终更新:
仍然不是一个完美的解决方案,但这应该足以让你前进。尽管如此,我还是要完成自己的工作。我使用了一个容器类,并在子元素上抛出了CSS转换。然后在.toggleClass()
上只有一个简单的.container
。
<强>更新
如果你包含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);
});