Плавное изменение высоты у объекта

Речь пойдет о том, как сделать плавное видвижение объекта по средствам изменения высоты.

Посмотреть пример: size-chooser.html.
Посмотреть пример с картинкой: size-img.html.

Делается это посредством jQuery и пару строк JavaScript’a.

Для начала подключаем jQuery mini. Для этого скачиваем файл и вставляем слудующим образом:
<script type="text/javascript" src="jquery-1.3.1.min.js" ></script>
Теперь делаем структуру на HTML.
<div id="block-vidvig">
Блок, который должен плавно выехать.<br />
Блок, который должен плавно выехать.<br />
Блок, который должен плавно выехать.<br />
Блок, который должен плавно выехать.<br />
Блок, который должен плавно выехать.<br />
</div>
<a id="click" href="javascrip:">Кликни тут</a>
Если блок, который выезжает не столь важеш для поисковиком, то лучше поместить его в самый низ вашего кода. Он будет задан абсолютным позиционированием..

Как видите в коде, блоку который будет выезжать, задан определенный id. Если вы ничего не понимаете в html и css, это не меняйте.

И текст, который облачен в a с id’ом «click» обязателен. Нажимая на него, будет выползать блок.

Теперь разберемся с JavaScrip.
<script type="text/javascript">
<!--//<![CDATA[
$(document).ready(function(){
$("#click").click(function(){
$("#block-vidvig").slideToggle("slow");
});
});
//]]>–>
</script>
В данном случае скорость выдвижения равна «slow». Имхо, это само приемлемо.

И теперь CSS. Здесь ваш полет фантазий будет располагаться как вы хотите.

Мы свами разберем только block-vidvig.
#block-vidvig{
background:#000;
color:#fff;
height:150px;
width:300px;
padding:5px;
position:absolute;
top:50%;
margin-top:-65px;
left:50%;
margin-left:-150px;
display: none;
}
Разберемся по порядку:

• background. Здесь я не буду комментировать..
• color. Здесь тоже ; ).
• height. Высота выезжаемого блока.
• width. Ширина выезжаемого блока.
• padding. Отступ внутренних блоков от краев.
• position. Абсолютное позиционирование.
• top, margin-top. В данном случае, мы делаем оступ сверху на 50%. Потом убираем пол блока. Обязательно учитываем паддинг. То, что мы использовали отрицательный оступ на пол высоты, дает нам появление блока из центра.
• left, margin-left. 50% — половины блока. Это значит поное центрирование блока по горизонтале.
• display. Блок не виден.. Виден только после появления ; )..

Здесь, ваши руки и мозг могут сделать все что угодно ; ). Например появления сверху вниз. Снизу вверх.

Подведем итог. Мы имеем красивый блок на jQuery. Повляющийси либо из центра, либо сверху вниз, либо снизу вверх. Причем этот блок оформляется как угодно.

Egoholic рассказывает об ошибках Абырвалга