CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Complexity
Complexity

Reputation: 5820

Make element visible with an animation

I'm currently developing a plugin that enabled me to mimic the Office Ribbon interface for web applications.

Now, everything up now is functional, but I want to add some animation to it, just as in the original Ribbon.

For people who have Outlook 2013, you can see the behaviour what I mean:

When you click on item that has a dropdown (f.e. "New items") the dropdown comes fly in from the top.

Now, I have created a dropdown myself which become visible by clicking on the icon, but this is without animation (just display block).

Can someone provide me the code I need to make it fly in from the top? You can find the fiddle here: http://jsfiddle.net/Complexity/nf7Lr/

my menu is decorated with the following class: 

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

So, I want the menu to fly in from the top (just under the clicked button).

Kind regards,

Kevin

Upvotes: 0

Views: 73

Answers (2)

Hamed Ali Khan
Hamed Ali Khan

Reputation: 1118

To show the menu

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

and to hide it back

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

Upvotes: 1

Thomas
Thomas

Reputation: 1420

Jquery has built in method to have smooth appear/disappear

Have you check : http://api.jquery.com/fadein/

The easing attribute let you choose different effects : http://jqueryui.com/resources/demos/effect/easing.html

Upvotes: 0

Related Questions