Задать вопрос
@dero
о себе
javascript

Как анимировать сдвиг блока, при появлении блока рядом?

Есть блок (display:table-cell;vertical-align:middle;) , который расположен внутри блок с display: table;

При нажатии на кнопку внутри блока, снизу появляется блок текста (display:none -> display:block), блок сверху сдвигается с центра под верх странички. Суммарно с текстом они остаются по центру.

Код JQUERRY
$('.more1').click(function(){
	$('.mt1').toggleClass('open', 500, "easeOutSine"); //класс на кнопке
	$('.more_text1').addClass('animated slideInUp'); //анимация появления текста (animated.css)
	$('.more_text1').fadeToggle(500);	//появление блока текстового
});


Вот например что-то похожее https://codepen.io/anon/pen/BYdLMq. При нажатии на кнопку, кнопка растгивается мгновенно, как сделато это плавно?
  • Вопрос задан
  • 990 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
@maxsnw
запомни, что через css анимацию плюс дисплей блок\нон, транзишн не будет работать, он будет работать только с опасити. Через скрипт возможно задать плавное появление, но оно тоже, насколько мне известно не очень работает.
$(".element").fadeOut(300, function(){$(this).removeClass("open", 300)});
Ответ написан
Комментировать
Комментировать
DDolgy
@DDolgy
Распи***й
Transition width 0.5s linear
Ответ написан
1 комментарий
1 комментарий
kally
@kally 
.gallery{
        width: 100px;				
        opacity: 0;
        transition: all 2s;	/*  all-что именно меняется, 2s-скорость в секундах  */	
}

.gallery-1{
        width: 300px;				
        opacity: 0;	
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать 20-минутное видео за примерно 50$ (Только Новичкам)
18 апр. 2024, в 22:09
4700 руб./за проект
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Ещё заказы