Как сделать анимацию блока в html?

Aleksander K.
  · 1,7 K

Требуется сделать expand-collapse функциональность блока. Блок должен анимироваться по высоте.

Анимирование через свойство height не работает при первоначальном значении `height: 0`;

Партнёрские программы, инструменты для вебмастера, рейтинг хостингов  · siterost.net
Отвечает
Вадим

Анимировать изменение высоты блока и получить эффект expand-collapse (развернуть/свернуть), проще всего при помощи jQuery. Вот пример кода:

HTML

<button class="toggle">Развернуть</button>

<div class="target"></div>

CSS

.target { height: 0; }

JS

jQuery(document).ready(function($){

$('.toggle').on('click', function(){

var target = $('.target'),

toggle = $(this);

if(!target.hasClass('expanded')){

target.animate({height: '200px'}, 'slow').addClass('expanded');

toggle.text('Свернуть');

}

else {

target.animate({height: '0'}, 'slow').removeClass('expanded');

toggle.text('Развернуть');

}

});

});

Вот демо того, что должно получиться. Естественно, для того, чтобы все это работало, нужно подключить библиотеку jQuery. Удачи!

2 эксперта подтверждают
8 мая  · 451
Комментировать ответ…
Ещё 1 ответ
Добрый Россиянин

советую пчитать здесь http://beloweb.ru/javascript-jquery/kak-sdelat-animatsiyu-pri-prokrutke-stranitsyi-dlya-bloka-s-pomoshhyu-jquery-i-css.html, много писать придется.

Комментировать ответ…
Вы знаете ответ на этот вопрос?
Поделитесь своим опытом и знаниями
Войти и ответить на вопрос
Читайте также

Как установить гиперссылку в HTML?

Frontend-разработчик, создатель учебного портала Frontend Blok и сервиса Frontend Help и...  · tele.click/tpverstak

Для гиперссылок необходимо использовать тег <a>

Обычно ссылка выглядит следующим образом:

<a href="https://example.com">Ссылка</a>

Вместо https://example.com необходимо записать ссылку, на которую хотите установить переадресацию.

Если необходимо открыть ссылку в следующей вкладке, то необходимо дописать аттрибут target="_blank".

В итоге будет следующая запись:

<a href="https://example.com" target="_blank">Ссылка</a>

5 июля 2018  · 49,2 K
Прочитать ещё 2 ответа

Можно ли за лето научиться вёрстке (html, css, js)? Если да, то что учить и где?

Программист, блогер  · t.me/technologytimes

Можно! Только JS это не верстка. Учите сразу HTML и CSS. Они относительно простые и азы можно постичь за неделю. Есть много обучающих сервисов, классные обучалки на youtube, платные курсы, документация в конце концов. Главное - практикуйтесь! Все новое, что узнаете, сразу применяйте на деле. Сделайте себе сайт-визитку например, или подготовьте сайт для будущего портфолио. Придумайте себе проект, который будет интересен для вас и тогда обучение будет идти с удовольствием и очень быстро. Если что-то не получается сделать, то я вас уверяю, что ответ уже давно знает гугл или stackoverflow, просто загуглите.

JS сложнее, но также можно вложиться в лето. Поймите, выучить язык программирования - это неправильная формулировка. Языки (тем более JS) развиваются с огромной скоростью. Поэтому учиться придется постоянно, даже когда уже будете работать. Развивать навыки программирования можно только практикуясь. Поэтому изучайте азы, делайте какой-нибудь небольшой проект для себя и идите на собеседование. Устроившись джуниором вы за 3 месяца получите больше знаний и опыта, чем за год изучения дома.

Какой путь вы для себя видите? Если вы хотите быть верстальщиком, тогда глубокое изучение JS вам не потребуется. Если вы видите себя фронт-энд разработчиком, тогда нужно будет обратить внимание на JS фреймворки. Если бек-эндщиком, то можно пройтись только по основным моментам в HTML и CSS, чтобы иметь представление и уметь сверстать то-нибудь простое.

И еще совет не по теме, изучайте параллельно английский.

Прочитать ещё 2 ответа

Как сделать ссылку на вторую страницу внутри сайта в html?

Чтобы сделать ссылку на новую страницу сайта, нужно вписать ссылку в <a>.

Например: <a href="site.ru/raspisanie">Расписание</a>

Также можете указать дополнительные атрибут target="new" - чтобы ссылка открывалась в новом окне.

Чтобы сделать сделать ссылкой картинку используйте <a href="site.ru/raspisanie"><img="путь к картинке"></a>

Будут вопрос - пишите!

7 января  · 20,9 K
Прочитать ещё 2 ответа

Как изменить шрифт в html?

Артур Санамян
Эксперт
282
Руководитель веб-студии Artworkshop. Разрабатываем сайты и помогаем компаниям получать...  · aws.su

Неважно какой тег, но для примера возьмем <p>

пишете атрибут style=""

Пример:

<p style='font-size:10px ; font-weight:100; font-family: Geneva, Arial, Helvetica, sans-serif;'>Текст</p>

Font-size - размер шрифта

Font-weight - толщина

Font-family - Семейство шрифтов. Также помимо стандартных можно подключить другие шрифты например из каталога Google Fonts

Но содержимое атрибута Style лучше размещать через класс в CSS-файле или на крайний случай в теге <style>

3 декабря 2018  · 28,1 K
Прочитать ещё 1 ответ

Как задать стиль и цвет текста без CSS?

в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.

<font color="red">Красный текст</font>

Значение цвета можно задавать несколькими способами:

  • При помощи кодового названия (Например: red, black, blue)
  • В шестнадцатиричном формате (Например: #000000, #ccc)
  • В формате rgba (Например: rgba(0,0,0,0.5))

А так советую прочитать учебник по хтмл. Яндекс найдет все

18 марта  · 8,9 K