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

Материал из JQuery

Перейти к: навигация, поиск

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

<ul id="menu">
  <li id="home"><a href="#">home</a></li>
  <li id="about"><a href="#">about</a></li>
  <li id="services"><a href="#">services</a></li>
  <li id="contact"><a href="#">contact</a></li>
</ul>

и следующего 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);
  });

Результат будет следующим.

Используемые методы jQuery