[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1360
  • Last Modified:

CSS effect to show and hide div

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
SimpleDude
Asked:
SimpleDude
2 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
I think it will be easier to  use one of the jquery animations http://api.jquery.com/slideDown/
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
Slide Toggle is also a good choice if you are trying to close and open something.

http://api.jquery.com/slideToggle/
0
 
SimpleDudeAuthor Commented:
Thanks guys
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now