Grow your CSS skills. Land your dream job.

Need help with background image fade using jQuery

  • # May 26, 2008 at 9:28 am

    Hey folks,

    Sorry if this topic has already been covered, I did a brief look around before posting, and it’s too early in the morning for me. :D

    I am developing a website with your typical horizontal navigation bar. The menu consists of text links with sufficient padding, etc. Each anchor element has a different icon (that is a background image, not a standard image) left-aligned associated with the link. My menu structure is a unordered list wrapped in a div element. The div element has a subtle gradient background.

    Here’s what I would like to achieve, and I have absolutely no idea how to do it.

    When onMouseOver event is reached on the anchor, I want to fade in a different background image on the list-item, so I’m guessing I need a way to initially set the background image’s opacity to 0 on page load, and fade in the image via opacity.

    And I want to reverse the process onMouseOut.

    I’ve searched and searched and searched. I haven’t found anything that uses a background image, only fading colors. Colors aren’t an option for me, as the hover background image has a subtle gradient to it as well, it’s just brighter.

    I’ve been slamming my head into the table for a while now, so any help you could offer would be spectacular and greatly appreciated.

    I’m using the latest version of jQuery by the way.

    *EDIT* A good example is the jQuery UI website’s "launch pad" (near the footer). http://ui.jquery.com/home
    I’ve looked at the JS and CSS, and it looks like a beast :(

    # May 26, 2008 at 7:43 pm

    Perhaps this tutorial on jQuery for Designers will help you:
    http://jqueryfordesigners.com/image-cro … ransition/

    There is a variety of techniques for doing exactly this explained.

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

You must be logged in to reply to this topic.

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