使用动画使元素可见

时间:2014-03-27 09:33:57

标签: javascript jquery html css

我目前正在开发一个插件,可以让我模仿Web应用程序的Office Ribbon界面。

现在,现在一切正常,但我想为它添加一些动画,就像在原始功能区中一样。

对于拥有Outlook 2013的用户,您可以看到我的意思:

当您点击具有下拉列表的项目(f.e。"新项目")时,下拉列表将从顶部开始。

现在,我自己创建了一个下拉列表,通过单击图标可以看到它,但这没有动画(只是显示块)。

有人可以提供我需要的代码,让它从顶部飞入吗? 你可以在这里找到小提琴:http://jsfiddle.net/Complexity/nf7Lr/

我的菜单上装饰有以下类:

<div class="menu" id="mnuCleanUp">

所以,我希望菜单从顶部飞入(在点击的按钮下)。

亲切的问候,

凯文

2 个答案:

答案 0 :(得分:1)

显示菜单

$("#mnuCleanUp").slideDown("slow");

并隐藏它

$("#mnuCleanUp").slideUp("slow");

答案 1 :(得分:0)

Jquery内置方法有流畅的显示/消失

您检查一下:http://api.jquery.com/fadein/

缓动属性可让您选择不同的效果:http://jqueryui.com/resources/demos/effect/easing.html