Δημιουργήστε μια εικόνα CSS sprite, με το πάνω μισό και το κάτω μισό να είναι οι δύο εικόνες στις οποίες θέλετε να κάνετε κινούμενη εικόνα. Το jQuery προσθέτει μια ετικέτα και προσθέτει το κάτω μισό της εικόνας sprite ως φόντο. Καθώς αιωρείται και σβήνει, η απόσταση κινείται μεταξύ πλήρως διαφανών και πλήρως αδιαφανών, εξασθενίζοντας τη μία εικόνα στην άλλη.
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); )); ));