Haga una imagen de sprite CSS, con la mitad superior y la mitad inferior siendo las dos imágenes entre las que desea animar. JQuery agrega una etiqueta y agrega la mitad inferior de la imagen del sprite como fondo. A medida que se activa y desactiva, el intervalo se anima entre completamente transparente y completamente opaco, desvaneciendo una imagen en otra.
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); )); ));
