Gör en CSS-sprite-bild, med den övre halvan och den nedre halvan de två bilderna du vill animera mellan. JQuery lägger till en tagg och lägger till den nedre halvan av sprite-bilden som bakgrund. När du svävar på och av animeras intervallet mellan helt transparent och helt ogenomskinligt och bleknar en bild till en annan.
HTML:
- home
- about
- services
- contact
CSS:
ul#menu li a(float:left;display:block;background:url("images/menu.png.webp") 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.webp");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(""); $("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); )); ));