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

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

Посмотреть пример: 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 рассказывает об ошибках Абырвалга

Комментарии — 36 комментариев

  1. #10607 ДоброЖелатель в 19:17, 5 октября 2010:

    Ответить | Цитировать

    Пример почему то не полностью отобразился…

  2. Юрий, следующая статья будет посвящена такой анимации.
    ДоброЖелатель, для вставки кода используйте тег:

  3. […] Плавное изменение высоты у объекта — изменение размеров у объекта. […]

  4. #12640 Новичек в 16:55, 18 ноября 2011: (подписался)

    Ответить | Цитировать

    Всем привет, блин парни скажите пожалуйста как это все поставить на Ucoz? Я в этом не разбераюсь, помогите пожалуйста. Тоесть куда, да что вписывать, буду очень благодарен. 🙂

  5. #19078 Городской-сумашедший в 21:48, 27 марта 2013: (подписался)

    Ответить | Цитировать

    А внизу выложить исходник не судьба?

  6. #54523 Сергей в 21:06, 4 апреля 2016: (подписался)

    Ответить | Цитировать

    Как сделать тоже самое, но не с Id, а с классом?

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting