• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 393
  • Last Modified:

Fade In/Fade Out Div when clicking menu options

As of now I have a very simple  onclick method that checks the visibility of a div and changes it to the inverse.

For example, when someone clicks on the blog link, the runs the function that changes the display attribute of current divs to none & changes the display of the blog div to visible.

How can I make these divs fade in / fade out (rapid fade) ??

TIA Experts
0
Imaginx
Asked:
Imaginx
  • 5
  • 4
  • 4
2 Solutions
 
ImaginxAuthor Commented:
FYI:

I looked @:
http://viralpatel.net/blogs/2009/01/fadein-fadeout-fade-out-effect-in-html-text-div-using-jquery.html

Not sure that something like this would work ... I have multiple DIV boxes in the center of the screen.
Only one stays visible.

0
 
leakim971PluritechnicianCommented:
you can use :

$("div:visible").fadeOut("fast");

and

$("div.menu" + x).fadeIn("fast");
0
 
ImaginxAuthor Commented:
Hey superstar ...
You have 2,000,000 points more than 2nd place ...

While I always appreciate you coming to the rescue, I'm concerned for your well-being ... You may not be getting enough time away from EE :)

Let me try that solution out ... Thanks Leakim !
0
Industry Leaders: 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!

 
leakim971PluritechnicianCommented:
lol
I'm fine, thank you Imaginx
x is a parameter allowing you to select the right menu to show it.
perphaps better with an id ;

$("#menu" + x).fadeIn("fast");

<div id="menu1"> .... </div>
<div id="menu2"> .... </div>
<div id="menu3"> .... </div>
<div id="menu4"> .... </div>

0
 
leakim971PluritechnicianCommented:
0
 
Michel PlungjanIT ExpertCommented:
I agree. the reason there is such a gap down to me (I'm still #1 JS overall though ;), is because I only get a chance to answer questions during the 30 minutes leakim sleeps in a 24 hour period
I am actually quite sad sometimes that leakim is so obsessed since it really influences the number and quality of questions I get to answer :(
I have a life and family and job and non-profit org to run, but really like answering questions here. And if this continues I never get my 10mio points
0
 
leakim971PluritechnicianCommented:
Hi Master mplungjan, I sleep more than 6h/day lol
I've a family (yes a woman gave me this luck :) and a job.
French caribbeans say : << dé mal kwab pé pa rété adan mèm twou la >>
Translation : << Two male crabs can not stay in the same hole >>

"Don't worry", I'm going to left the hole very soon :))
0
 
Michel PlungjanIT ExpertCommented:
Oh? Why leave? Then I will have TOO much work ;)
Please stay
0
 
ImaginxAuthor Commented:
*note to self: mplungjan in #1 in js .. keep him on your good side ... :)

I wouldn't get too excited about your positions fellas, I have 6300 points - I'm hot on your trails !! lol


Leakim - these solutions worked awesome, is there a way to make the fade work on rollover instead of click ... ?
0
 
Michel PlungjanIT ExpertCommented:
:) And don't you forget it!

What is the code you have now that use click?
It should be interchangeable with mouseenter
0
 
leakim971PluritechnicianCommented:
@mplungjan
I'm not gonna to leave EE, I'm just looking for an other zone but I will keep an eye on all JS questions of course. I learn a lot with you.

@Imaginx

mplungjan is right, check this too : http://api.jquery.com/hover/

http://api.jquery.com/mouseover/
http://api.jquery.com/mouseout/
0
 
ImaginxAuthor Commented:
Im so sorry for the delay gentleman ... I had a hard drive crash recently - motor stopped spinning & have been dead in the water for a short period.

Thank you both so much for your help, you're both truly great assets to this community & I hope I get to learn from you again in the future.
0
 
Michel PlungjanIT ExpertCommented:
You are welcome, however what code did you use? It is not clear from your "accepted/assisted" selection since the accepted answer was just a comment of mine.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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