JavaScript hover fade.

[brendanwright]

I am new to JavaScript and I am not very good at programming but I want to be able to have a few lines of simple code that will generate a fading hover effect that I could put on some navigation such as the top navigation in http://dragoninteractive.com/ and in
http://www.nintendo.com/

Anything helps and I would love if you could add some comments to the code so I can actually learn what does what.
Thanks! :]
Brendan Wright

[Chris Coyier]

Using jQuery you can do fade in and outs super easily. I’m just learning, but it would go something like this:

Code:

$(.button).each(function(){ // everything with class=”button”
$(this).click(function(){ // when clicked
$(this).fadeOut(); //fades out
)};
)};

You could have something behind it that it fades into, which when clicked or hovered or something, would fade back in the original. I am FAR from an expert on this, but thems the basics. You’ll have to include jQuery as a script on your page before you call this (from within another script tag).

[kaja]

Hi Tob, thank you for sharing this script! I am completely at the beginning of jQuery and mootools.
I noticed that in firefox the hover appears twice though? Any suggestions? Thank you so much in case you have time to answer this!

[Author]

Posts