Fade One Image to Another Menu

Make a CSS sprite image, with the top half and the bottom half being the two images you want to animate between. The jQuery adds a <span> tag, and adds the bottom half of the sprite image as its background. As you hover on and off, the span animates between fully transparent and fully opaque, fading one image into another.

HTML:

<ul id="menu">
       <li id="home"><a href="#">home</a></li>
       <li id="about"><a href="#">about</a></li>
       <li id="services"><a href="#">services</a></li>
       <li id="contact"><a href="#">contact</a></li>
</ul>

CSS:

ul#menu li a{float:left;display:block;background:url("images/menu.png")  no-repeat;width:150px;text-indent:-9999px;height:50px}
ul#menu li#home a{background-position:0px 0px}
ul#menu li#about a{background-position:-150px 0px}
ul#menu li#services a{background-position:-300px 0px}
ul#menu li#contact a{background-position:-450px 0px}

ul#menu li a span {background:url("images/menu.png");height:50px;display:block}
ul#menu li#home a span{background-position:0px -50px}
ul#menu li#about a span{background-position:-150px -50px}
ul#menu li#services a span{background-position:-300px -50px}
ul#menu li#contact a span{background-position:-450px -50px}

jQuery:

$(function() {
       $("ul#menu li a").wrapInner("<span></span>");
       $("ul#menu li a span").css({"opacity" : 0});

       $("ul#menu li a").hover(function(){
               $(this).children("span").animate({"opacity" : 1}, 400);
       }, function(){
               $(this).children("span").animate({"opacity" : 0}, 400);
       });
});

Reference URL

Comments

  1. User Avatar
    Charlie
    Permalink to comment#

    You can see a demonstration here:

  2. User Avatar
    Al
    Permalink to comment#

    demo has the stepdown problem in ie7,
    works ok with FF

    Al

  3. User Avatar
    Al
    Permalink to comment#

    sure don’t work with ie6,
    tested it out with a jpg tho and that works

    unitpngfix does not work with background-position in ie6

    I think that it is an interesting effect when you hover on a link

    al

  4. User Avatar
    Al
    Permalink to comment#

    is the link to the reference url broken?

    Al

  5. User Avatar
    Charlie
    Permalink to comment#

    reference url should work now, and stopped the stepdown in ie7 – thanks for the heads up people

    • User Avatar
      Jeff
      Permalink to comment#

      Also, how do you mark an active state? I would like to keep the item highlighted once selected.

    • User Avatar
      Alexandru Nastase
      Permalink to comment#

      aplly a class name to that anchor tag

    • User Avatar
      Alexandru Nastase
      Permalink to comment#

      still look’s creepy in ie7 on w7

  6. User Avatar
    Jeff
    Permalink to comment#

    Can you do this in a vertical menu?

  7. User Avatar
    Dani
    Permalink to comment#

    Really great effect. I have a third state which is active, It works well with css only but when I hover the active state with this effect it appears the hover state, can I prevent from applying this effect to the active current selected tab while allowing the normal tabs to fade to hover. Any help would be appreciated. Thanks.

  8. User Avatar
    Pini
    Permalink to comment#

    i don’t know what i.m doing wrong but i copy paste to my page and it gets an angle,
    you can see it here :(

    http://www.strongerorg.com/OrganisationSite/SpriteTest.aspx

  9. User Avatar
    sridarshan
    Permalink to comment#

    I think you should use the .stop().animate() here , if you dont want the images to flicker after multiple hovers

  10. User Avatar
    Ruana
    Permalink to comment#

    Hi,

    in IE7 you should define a

    ul#menu li {display: inline; }

    otherwise the browser shows a “step”-effect (stepping down from left to right). I did notice several times that IE7 has problems with display: block; added to the a-selector in horizontal lists. Sometimes I even had to remove it totally otherwise the browser wouldn’t display the list properly.

  11. User Avatar
    claus
    Permalink to comment#

    hi,

    it works very good, thanks
    but how can I center it in my web page?

    I tried with a DIV propertie but it didn´t work…

  12. User Avatar
    sean

    This is all very nice & I can see it works – but you don’t explain where to place the jquery code or how to link it to the specific task – much more instruction is needed here.

  13. User Avatar
    Groebe
    Permalink to comment#

    The Preview Page gives me a spyware alert from my anti-virus program

  14. User Avatar
    Matt
    Permalink to comment#

    Hi,

    I am having trouble getting the navigation buttons to stay active on the button being clicked. Alexandru Nastase (above) mentioned adding a className to the anchor but you didn’t elaborate and I can’t figure it out. so I’m going to ask the question. How do you get the button being clicked to remain in the hover state while resetting the other buttons to the normal link state?

  15. User Avatar
    Otto

    I got everything in place but can not get this to work at all.
    Is this script compatible with jquery-1.3.2.min.js only?
    The site I’m setting up is on 1.7.1

  16. User Avatar
    Andrew K
    Permalink to comment#

    In case anyone runs into this issue if you copy the code from the reference URL (http://charles-harvey.co.uk/plugins/animatedbackground/) the second line of jQuery that inserts the span has a space in the first span markup tag – which causes the function to not work properly ;)

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag