Solved

CSS effect to show and hide div

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

Accepted Solution

by:
Scott Fell,  EE MVE earned 350 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks guys
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now