Animated BG Change

By Charles Harvey

• home
• about
• services
• contact

Hover over the menu to see the background change, using the following sprite image:

The Jquery

$(document).ready(function() {
	$("ul#menu li a").wrapInner("< span>< /span>");
	$("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);
	});
});

The CSS

ul#menu li a{float:left;display:block;background:url("images/menu.png") 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");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}