Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.08.2016, 17:00
Новичок на форуме
Отправить личное сообщение для Skrowaks Посмотреть профиль Найти все сообщения от Skrowaks
 
Регистрация: 01.08.2016
Сообщений: 3

Добавить/удалить класс при клике.
Здравствуйте.
Имеется код:
<script type="text/javascript">
 $(function(){
            $('.menu-btn').click(function(){
                $('.menu').toggleClass('dis2 anim1');
            });
        });
</script>
По клику на кнопку .menu-btn ссылки .menu (у которых изначально был display: none; ) получают класс dis2 {display: block} и .anim1. Соответственно при повторном клике эти классы удаляются.
А нужно, чтобы при втором клике по .menu-btn первые два класса удалялись, и вместо них присваивался класс .anim2. Чтобы проигрывалась анимация скрытия меню.
При поиске выдает только toggle, но он не подходит для меня. Или я чего-то не понимаю.
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2016, 17:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сообщение от Skrowaks
Чтобы проигрывалась анимация скрытия меню.
как же она приграется если будет display: none если удалить dis2
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2016, 17:39
Новичок на форуме
Отправить личное сообщение для Skrowaks Посмотреть профиль Найти все сообщения от Skrowaks
 
Регистрация: 01.08.2016
Сообщений: 3

Нужно чтобы сначала проигрывалась анимация и далее классу присваивался display:none;
Ответить с цитированием
  #4 (permalink)  
Старый 01.08.2016, 19:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Skrowaks
Нужно чтобы сначала проигрывалась анимация
Значит и класс переключайте по окончании анимации.
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2016, 01:33
Новичок на форуме
Отправить личное сообщение для Skrowaks Посмотреть профиль Найти все сообщения от Skrowaks
 
Регистрация: 01.08.2016
Сообщений: 3

Не понимаю каким образом это реализовать. За этим и обратился.
Ответить с цитированием
  #6 (permalink)  
Старый 02.08.2016, 05:08
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Skrowaks, у тебя или стили криво написаны, или одно из двух. При удалении правила которое влияет на свойство указанное в transition, анимация срабатывает в точности наоборот и ничего втыкать дополнительно не надо. То есть по classList.toggle() меню будет бегать туда-сюда как миленькое.

Но если сильно хочется усложнить себе жизнь, то повешайся на

elem1.addEventListener('transitionend',function(e) {elem2.classList.toggle('come-back')});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увеличение картинки при клике - самый простой способ Lagshmivar Firefox/Mozilla 16 23.02.2017 17:03
При клике появлялся новый элемент (бесконечно) Eadweard Элементы интерфейса 3 16.02.2016 08:13
При клике на кнопку переход к якорю и открытие блока Galyanov Элементы интерфейса 19 11.12.2015 21:12
Изменение размера элемента при клике Derekovich Элементы интерфейса 25 05.12.2013 20:45
Запись cookes при клике pavdin Общие вопросы Javascript 3 06.02.2012 17:19