Solved

CSS effect to show and hide div

Posted on 2014-04-17
3
1,187 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 52

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

749 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