Grow your CSS skills. Land your dream job.

JavaScript hover fade.

  • # April 4, 2008 at 2:22 pm

    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

    # April 4, 2008 at 5:11 pm

    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).

    # April 6, 2008 at 5:31 pm

    Hi Brendan,

    Here’s the Mootools way. It’s a bit more long winded than Chris’s as jQuery has a fadeout effect all lined up for you.
    Same idea different framework.

    This is a quick example ( rip off! :) ) of the dragon interactive http://tobypitman.com/mootools/hover.html.
    I think that’s what you mean. Feel free to swipe the code. Hints are in the source code.

    The menu ul has the reveal as it’s background and the list ‘a’ tag items have the fading image.
    It’s a cool effect. Wish I’d thought of it!!!!

    Hope it helps you out!

    Tob

    # April 10, 2008 at 12:39 am

    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!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".