Code Snippet
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:
$(document).ready(function() {
$("ul#menu li a").wrapInner("");
$("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);
});
});
You can see a demonstration here:
demo has the stepdown problem in ie7,
works ok with FF
Al
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
is the link to the reference url broken?
Al
reference url should work now, and stopped the stepdown in ie7 – thanks for the heads up people
Also, how do you mark an active state? I would like to keep the item highlighted once selected.
aplly a class name to that anchor tag
still look’s creepy in ie7 on w7
Can you do this in a vertical menu?
yeah you can I did it it’s easy
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.
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
I think you should use the .stop().animate() here , if you dont want the images to flicker after multiple hovers
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.
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…
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.