jQuery Horizontal Accordion — «играем» на аккордеоне

В этом примере я покажу как создать «эффект аккордеона», который можно использовать как для меню, так и для любых других целей. Раньше для этих целей использовался Flash, но теперь можно воспользоваться и jQuery.



Чтобы использовать jQuery на Вашем сайте, Вы сначала должны загрузить последнюю версию этой javascript-библиотеки, а затем подключить ее к Вашей странице.

Теперь позвольте, представить html-код для этого примера. Я указал для первой ссылки id, чтобы мы могли установить начальную ширину и заставить его казаться раскрытым, когда страница загружается.

<ul>
 <li>
 <a id="a1"><img src="habr.gif" />
 <span><strong>Хабрахабр</strong><br/>
 Лучший сайт Рунета.</span></a>
 </li>
 <li>
 <a><img src="tut_thumb.jpg" />
 <span><strong>jQuery</strong><br/>
 JavaScript-фреймворк, фокусирующийся на взаимодействии JavaScript и HTML.
 </span></a>
 </li>
 <li>
 <a>
 <img src="firefox.png" />
 <span><strong>Firefox</strong><br/>
 Лучший браузер, попробуйте и убедитесь.
 </span></a>
 </li>
</ul>

Добавляем стили, тут все очень просто.
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}
ul li img{
position: absolute;
border: 3px solid #881212;
}
ul li span{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}

А вот и jQuery-скрипт, который заставляет все это работать. Это может быть размещено между тегами .
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;

$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});

Первым делом мы установливаем несколько переменных:
lastBlock представляет блок, который уже раскрыт,
maxWidth — ширина, которую мы хотим установить для блока, когда он раскрыт,
minWidth — ширина свернутого блока.
Затем мы просто вешаем функцию на событие hover для всех ссылок, содержащихся в пределах всех пунктов списка. Здесь мы дважды вызываем функцию animate(): первый раз, чтобы закрыть lastBlock, и другой раз, чтобы раскрыть блок на который мы навели мышь. Затем мы устанавливаем lastBlock равный блоку, который мы только что раскрыли. Это для того, чтобы jQuery «знал», какой закрыть блок в следующий раз. Функция animate() позволяет создавать различную анимацию, устанавливая разные значения для различных свойств, но в данном случае мы только «анимируем» ширину.
Подробнее о функии animate() Вы можете прочить в официальной документации.

Пример

P.S. К сожалению, пример на сайте автора в Опере не работает, но у себя я его исправил. Надеюсь, кому-нибудь пригодиться. :)