Плавная смена фона в меню
Допустим, что нам нужно сделать меню (подобно такому), фон которого является сложным изображением. А при наведении курсора на элемент этого меню, фон под ним должен плавно измениться на подсвеченный или наоборот затемненный. В этом случае, необходимо поместить оба варианта фона: (и обычный и подсвеченный/затемненный) в одно изображение и загрузить его на сервер, допустим под именем 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); });
Результат будет следующим.
