Я написал этот код для того, чтобы меню исчезло и оставило место для боковой таблицы. Я достиг того, чего хотел, но мне нужно сделать его более привлекательным. Я заметил, что когда я нажимаю. перед расширением зеленого div, происходит скачок положения. Я хотел бы показать весь процесс движения. Я пробовал с transition: all 2s
CSS transition: all 2s
но он, похоже, не работает.
Мне бы хотелось увидеть слайд-подобный глобальный переход.
Здесь скрипка:
Окончательное обновление:
Все еще не идеальное решение, но это должно быть достаточно хорошим, чтобы вы могли идти. После этого я должен продолжить свою работу. Я использовал класс контейнера и перебрасывал переходы CSS на подэлементы. Тогда просто простой .toggleClass()
в .container
.
Обновить:
Если вы включаете jQuery UI (который я не рекомендую, если вам не нужен), то .addClass()
, .removeClass()
и .toggleClass()
принимают второй параметр в течение продолжительности, как в этом JSFiddle.
В противном случае вам лучше отказаться от переходов CSS. JSFiddle (можно определенно очистить, но работает):
.aa {
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
Прямо из документации jQuery .toggle()
:
.toggle( [duration ] [, complete ] )
duration (default: 400)
Type: Number or String
A string or number determining how long the animation will run.
Вы можете добавить время, на которое длится анимация. Здесь я установил его в течение 1 секунды:
$('.sidebar').on('click',function () {
$('.sidebar').toggle(1000);
});
slideUp()
: jsfiddle.net/AaGFs