javascript - Is it possible to animate slideDown on visibility hidden element? - Stack Overflow

I'm trying to make SlideDown or an alternative of that effect to a nav that is bu default visibilty:hidden and what i'm doing now is like this:

$(this).find('nav.Menu').css('visibility','visible')

It's working just fine, but i have more submenus and i want an effect when hovering between the main menu to slidedown and up submenus. is this possible without display:none/block ?

JSFIDDLE

I'm trying to make SlideDown or an alternative of that effect to a nav that is bu default visibilty:hidden and what i'm doing now is like this:

$(this).find('nav.Menu').css('visibility','visible')

It's working just fine, but i have more submenus and i want an effect when hovering between the main menu to slidedown and up submenus. is this possible without display:none/block ?

JSFIDDLE

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 29, 2015 at 15:11 Abude asked Jan 29, 2015 at 15:03 AbudeAbude 2,16288 gold badges3636 silver badges6060 bronze badges 9

• Can you post a JSFiddle? – Ionică Bizău Commented Jan 29, 2015 at 15:06
• what happened when you tried it? – atmd Commented Jan 29, 2015 at 15:06
• @atmd what do you mean? i've tried only making it visible and hidden by .css in jQuery – Abude Commented Jan 29, 2015 at 15:07
• Also please post some html – Jamie Hutber Commented Jan 29, 2015 at 15:10
• 1 @JDB, you are absolutely right, but my nav that is hidden has a sub nav that is a sidebar which should be visible, so if i hide by display the first nav then i couldn't show the child nav, that's why i'm using visibility – Abude Commented Jan 29, 2015 at 15:12

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 8

Since your element has visibility: hidden make it visible, then hide() it and call the slideDown() function:

$('#error').css('visibility','visible').hide().slideDown();

JSFDIDLE

The hover handlers can be:

$("<selector>").hover(function () {
    $('#error').css('visibility','visible').hide().stop().slideDown();
}, function () {
    $('#error').stop().slideUp();
});

You can try positioning your submenu so it is behind its parent, toggle the visibility, and slide it out from behind the parent. You can reverse the process (slide behind, then toggle visibility) when closing the submenu.