Главная » Создание сайтов » Верстка » Плавное изменение высоты у объекта

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

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

Посмотреть пример: 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 рассказывает об ошибках Абырвалга С уважением, Vasilenko Ivan!

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

  1. #257 Ivan в 1:54, 29 января 2009:

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

    супер!

  2. #279 man11 в 15:51, 31 января 2009:

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

    плавное видвижение объекта _посредством_ изменения высоты.

  3. #280 man11 в 15:52, 31 января 2009:

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

    забавно, одни и те же слова в разных строчках написаны то с ошибками, то без

  4. #387 AlexPTS в 7:23, 15 февраля 2009:

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

    Красиво получается. Выпадаюшее меню на моем wordpress сайте в оригинале весило 300кб, я переделал на jQ, теперь все это дело весит 2 кб. Результат на лицо!

  5. #396 WebMast в 9:42, 15 февраля 2009:

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

    jQuery делает чудеса. Классный фреймворк!

  6. #462 амир в 10:29, 22 февраля 2009: (подписался)

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

    спасибо за статью (сижу подумываю,стоит ли посвятить время изучению jQwery,

    или все таки сперва освоить javascript...)

    вот решение на javascript:

    function getId (id) { //возвращает метод идентификации элемента

    return document.getElementById (id);

    }

    //функция открытия блока

    function Show (objId, hBlock) {

    var obj = getId (objId);

    if (obj.offsetHeight < hBlock) {

    obj.style.height = (obj.offsetHeight + 10) + «px»;

    setTimeout (function (){Show (objId, hBlock)}, 30);

    }

    }

  7. #465 амир в 10:41, 22 февраля 2009: (подписался)

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

    // закрытие блока:

    function Close (objId, hBlock) {

    var obj = getId (objId);

    obj.style.height = «0px»;

    }

    // или так:

    function Close (objId, hBlock) {

    var obj = getId (objId);

    obj.style.height = (obj.offsetHeight — 10) + «px»;

    setTimeout (function (){Close (objId, hBlock)}, 10);

    }else{obj.style.height = «0px»;}

    }

    функции тоже не привязывается к обьекту.

    могут вызываться везде и для любых обьектов.

    пример: onmouseover="Show ('company', 250);" onmouseout="Close ('company', 0);

    в плане творчества тоже простор.

    важно то,что блокам необязательно display: none; изначально задавать ( SEO).

  8. #823 Lex Nevermind в 22:32, 15 апреля 2009: (подписался)

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

    Я извиняюсь, Амир, а как заставить Эскплорер отображать слои корректно? Ежели высоту дива ставиш нуль и добавляеш правило оверфлоу:хидден, то в Опере и Фаере работает... но Эксплорер всё равно отображает див по размеру текста в нём :(

  9. #3491 timyozh в 12:50, 8 августа 2009:

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

    А возможно сделать горизонтальное выдвижение??

  10. #3496 F^[a].t в 18:49, 8 августа 2009:

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

    Люди!, да вы что!

    этот метод хорош, только когда блок маленького размера (как в примере). Но если к примеру ширину установить в 1000px и изменить размер окна!?, смотрите сами...

  11. #3500 WebMast в 19:30, 8 августа 2009:

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

    timyozh, возможно. Для этого используй анимацию:

    $(«#block-vidvig»).animate ({width: «show»}, 400);

    F^[a].t, Все нормально выглядит. Появляется полоса прокрутки конечно. Но этот эффект не для контента, а расчитан на уведомление. Типа alert окошек.

  12. #5965 duron в 18:31, 22 сентября 2009: (подписался)

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

    А как сделать несколько вызовов блоков на странице?

  13. #6002 WebMast в 8:05, 23 сентября 2009:

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

    duron, вот как я понял твою задачу:

    $(«#block-vidvig, #block-vidvig2, #block-vidvig3»)._;

  14. #6007 TAILER в 10:51, 23 сентября 2009:

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

    А как сделать чтобы после появления div при нажатии еще раз на ссылку div не исчезал?

    Ну допустим это можно будет использовать при показывании раздела-блока новостей.

  15. #6024 duron в 16:59, 23 сентября 2009: (подписался)

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

    Что-то так: $(«#block-vidvig, #block-vidvig2, #block-vidvig3») не получается... ?

  16. #6025 WebMast в 17:11, 23 сентября 2009:

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

    TAILER, поставь эффект вместо slideToggle — slideDown.

    duron, поменяй ковычки по бокам на " и "!

  17. #6078 TAILER в 13:52, 24 сентября 2009:

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

    WebMast, спасибо!

    А как сделать чтобы добиться такого же эффекта но не при клике на ссылку а при загрузке страницы?

  18. #6094 WebMast в 17:14, 24 сентября 2009:

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

    TAILER, вот:

    $(document).ready (function (){
    $(«#block-vidvig»).slideToggle («slow»);
    });

    duron, чтобы вставить код, помести его в тег code (<code>здесь код</code>).

  19. #6096 duron в 17:35, 24 сентября 2009: (подписался)

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

    Ага, спасибо! Так вот:

    <!--//-> <!--//->

    и, соответственно:

    <a href="" rel="nofollow"> <a href="" rel="nofollow">

    и

    Понятно, — лажа, но работает, собака!

  20. #6099 WebMast в 18:10, 24 сентября 2009:

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

    Ничего не понял с вашего кода =(.

  21. #6144 duron в 13:54, 25 сентября 2009: (подписался)

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

    Так он-таки и не отображается, даже в ! :- (

  22. #6157 WebMast в 16:37, 25 сентября 2009:

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

    duron, пожалуйста, напиши мне на почту.

  23. #7069 akuba в 18:18, 14 октября 2009:

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

    а как изменять скорость изменения?

  24. #7134 WebMast в 19:18, 15 октября 2009:

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

    akuba, найдите такую строчку:

    $(«#block-vidvig»).slideToggle («slow»);

    Вместо «slow» можешь поставить либо числовое значение без фигурных скобок либо «fast» и т. п.

  25. #8687 Fen4er в 15:11, 13 декабря 2009:

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

    Подскажите, как сделать, что бы блок не скрывался, а только на половину прятался, т.е. половина видна, а половина нет, и когда кликаешь, то раскрывается полностью.

  26. #8690 WebMast в 16:40, 13 декабря 2009:

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

    Используй анимацию:

    $('#block').animate ({height:"show"}, 'slow');

    height — задавай всю ширину. Затем делай оброботчик, который определит показан ли блок или нет. Если показан, то делай опять при помощи анимации:

    $('#block').animate ({height:"ширина половины блока"}, 'slow');

    Вот и все, имхо. Только не забудь изначально в ксс прописать для блока высоту : ).

  27. #9410 Andrei в 10:45, 1 марта 2010: (подписался)

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

    а как сделать чтоб выпадающий div был не поверх всего остального, а просто отображаясь подвигал все под собой. проблема в том что у меня в стобик идут ссылки к примеру: Зима, Весна, Лето, при клике на ссылку Зима выпадает div с контетном Декабрь, Январь, Февраль. при клике на Весну, Март, Апрель, Май. при использовании вашего кода выпадающий div открывается поверх Весны и Лета, а как сделать чтоб Весна и лето были ниже выпадающего diva

    Заранее огромное спасибо!

  28. #9411 Andrei в 10:50, 1 марта 2010: (подписался)

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

    уже разобрался, все дело в параметре position! :) извиняюсь за флуд...

  29. #10568 Юрий в 6:05, 26 сентября 2010: (подписался)

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

    А как сделать, чтобы блок не выезжал, а появлялся (ну к от прозрачности 100% к 0%)

    Кто может помочь???

  30. Юрий, вот пример как так сделать:

    =====================================

    p { font-size:150%; cursor:pointer; }

    If you click on this paragraph

    you'll see it just fade away.

    $(«p»).click (function () {

    $(«p»).fadeOut («slow»);

    });

    =====================================

    «fadeOut» — прозрачность от 100% к 0%, что бы сделать появление просто поменяйте «Out» на «In»

    «fadeIn» — от 0 к 100%

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

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

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

  32. Юрий, следующая статья будет посвящена такой анимации.

    ДоброЖелатель, для вставки кода используйте тег: <code>

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

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

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

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

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

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

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

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

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

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting