Créez une image de sprite CSS, la moitié supérieure et la moitié inférieure étant les deux images que vous souhaitez animer. Le jQuery ajoute une balise et ajoute la moitié inférieure de l'image du sprite comme arrière-plan. Lorsque vous passez la souris dessus et en dehors, la plage s'anime entre totalement transparente et totalement opaque, en fondant une image dans une autre.
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); )); ));