Solved

CSS effect to show and hide div

Posted on 2014-04-17
3
1,207 Views
Last Modified: 2014-04-21
Hi all,

If you see this page: http://www.avast.com and mouseover the "Business" option on top, a menu underneath the top menu will show up, and it will show up sort of like in "slow motion"... if you mouseout, it disapears.

 I tried to do the same by showing and hiding a DIV like this:

onmouseover="document.getElementById('SubMenu').style.display = 'block';"
onmouseout="document.getElementById('SubMenu').style.display = 'none';"

This is what I have on the DIV

<div id="SubMenu" style="display:none;">            
              <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="150">&nbsp;</td>
  </tr>
</table>
</div>    

But it just shows and hide, which is fine.

My question is, how can I add that "motion" effect for the DIV to show up slowly instead of just show and hide?

Thanks.
0
Comment
Question by:SimpleDude
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 350 total points
ID: 40007934
I think it will be easier to  use one of the jquery animations http://api.jquery.com/slideDown/
0
 
LVL 10

Assisted Solution

by:Jeffrey Dake
Jeffrey Dake earned 150 total points
ID: 40008141
Slide Toggle is also a good choice if you are trying to close and open something.

http://api.jquery.com/slideToggle/
0
 

Author Closing Comment

by:SimpleDude
ID: 40012851
Thanks guys
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question