Как я могу оживить движение этого .toggle ()?

0

Я написал этот код для того, чтобы меню исчезло и оставило место для боковой таблицы. Я достиг того, чего хотел, но мне нужно сделать его более привлекательным. Я заметил, что когда я нажимаю. перед расширением зеленого div, происходит скачок положения. Я хотел бы показать весь процесс движения. Я пробовал с transition: all 2s CSS transition: all 2s но он, похоже, не работает.

Мне бы хотелось увидеть слайд-подобный глобальный переход.

Здесь скрипка:

JSFiddle

  • 1
    Это зависит от того, что именно вы хотите ... jQuery имеет все виды возможностей анимации, так же просто, как использование чего-то вроде slideUp() : jsfiddle.net/AaGFs
  • 0
    извините, это была неправильная скрипка ... она не была обновлена ... сейчас она есть. Мне нужна анимация для движения зеленого div
Показать ещё 2 комментария
Теги:
animation
transition

1 ответ

0

Окончательное обновление:

Все еще не идеальное решение, но это должно быть достаточно хорошим, чтобы вы могли идти. После этого я должен продолжить свою работу. Я использовал класс контейнера и перебрасывал переходы CSS на подэлементы. Тогда просто простой .toggleClass() в .container.

JSFiddle

Обновить:

Если вы включаете 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);    
});

JSFiddle

  • 0
    извините, но я заметил, что скрипка была не той! это более сложный реальный пример, я обновил скрипку сейчас. Анимация, в которой я нуждаюсь, находится на зеленом div, и позже глобально.
  • 0
    Обновлен @ciaoben.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню