Tạo một hình ảnh sprite CSS, với nửa trên và nửa dưới là hai hình ảnh bạn muốn tạo hoạt ảnh giữa. JQuery thêm một thẻ và thêm nửa dưới của hình ảnh sprite làm nền của nó. Khi bạn di chuột qua và tắt, khoảng chuyển động giữa hoàn toàn trong suốt và hoàn toàn không trong suốt, làm mờ dần hình ảnh này sang hình ảnh khác.
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); )); ));