The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Need help with background image fade using jQuery

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #22703

    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).
    I’ve looked at the JS and CSS, and it looks like a beast :(

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.