将一张图片淡入另一张图片菜单

制作一个 CSS 精灵图片，上半部分和下半部分分别是你想在它们之间动画的两个图片。jQuery 添加了一个 <span> 标签，并将精灵图片的下半部分作为其背景。当你在上面悬停和离开时，span 在完全透明和完全不透明之间动画，将一个图片淡入另一个图片。

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);
       });
});