Плавная смена фона в меню (jQuery)

Допустим, что нам нужно сделать меню (подобно такому), фон которого является сложным изображением. А при наведении курсора на элемент этого меню, фон под ним должен плавно измениться на подсвеченный или наоборот затемненный. В этом случае, необходимо поместить оба варианта фона: (и обычный и подсвеченный/затемненный) в одно изображение и загрузить его на сервер, допустим под именем menu.png, в папку . И для следующего html:

<ul id="menu">

&lt;li id="home"&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="about"&gt;&lt;a href="#"&gt;about&lt;/a&gt;&lt;/li&gt;
  &lt;li id="services"&gt;&lt;a href="#"&gt;services&lt;/a&gt;&lt;/li&gt;
  &lt;li id="contact"&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

и следующего css:
#menu li a{float:left;display:block;background:url("images/menu.png")  no-repeat;width:150px;text-indent:-9999px;height:50px}
#home a{background-position:0px 0px}
#about a{background-position:-150px 0px}
#services a{background-position:-300px 0px}
#contact a{background-position:-450px 0px}

#menu li a span {background:url("images/menu.png");height:50px;display:block}
#home a span{background-position:0px -50px}
#about a span{background-position:-150px -50px}
#services a span{background-position:-300px -50px}
#contact a span{background-position:-450px -50px}

использовать такой javascript-код:
$("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);
  });

Запись навигация

Top