如何设置此.toggle()的运动动画?

时间:2014-02-25 15:55:49

标签: jquery css animation transition

我已经编写了这个代码,用于使菜单消失并为侧面表留出空间。我已经实现了我想要的东西,但我需要让它变得更加漂亮。我注意到,当我点击。在绿色div扩大之前,有一个跳跃的位置。我希望能够展示整个运动过程。我尝试过使用CSS transition: all 2s,但它似乎不起作用。

我希望看到一个类似幻灯片的全球转型。

这里有一个小提琴:

JSFiddle

1 个答案:

答案 0 :(得分:0)

最终更新:

仍然不是一个完美的解决方案,但这应该足以让你前进。尽管如此,我还是要完成自己的工作。我使用了一个容器类,并在子元素上抛出了CSS转换。然后在.toggleClass()上只有一个简单的.container

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