0

Как удалить один класс и добавить другой при клике, при повторном клике обратные действия совершить? Возможно ли добавить анимацию при переключении классов? (toggleClass)

7
  • 3
    Нужно повесить обработчик события на интересующий Вас блок, и при клике, задать/удалить этому блоку интересующий класс
    – Dmytro
    Commented 3 мая 2018 в 7:59
  • Это я понимаю. Добавляется класс, удаляется предыдущий. А вот при повторном нажатии как выполнять обратные действия
    – Optimus
    Commented 3 мая 2018 в 8:03
  • Воспользуйтесь методом toggle. developer.mozilla.org/ru/docs/Web/API/Element/classList. Чтобы получить более точный ответ, нужно задать более точный вопрос: показать верстку, пример кода своих попыток реализации
    – Dmytro
    Commented 3 мая 2018 в 8:07
  • Спасибо. Возможно ли добавить анимацию при переключении классов?
    – Optimus
    Commented 3 мая 2018 в 8:10
  • Смотря что изменяется, при переключении класса. Есть свойства, которые нельзя анимировать. Например, display
    – Dmytro
    Commented 3 мая 2018 в 8:12

1 ответ 1

1

Допустим есть элемент с классом test1, данная конструкция при клике на нем будет менять класс test1 на test2 и наоборот:

    $(".test1, .test2").on('click', function () {
        $(this).toggleClass("test1 test2");
    });

Анимацию же можно прописать в CSS стилях данных двух классов, например, самое простое — плавное изменение цвета шрифта:

.test1,.test2 {
    font-weight: bold;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
}
.test1 {
    color: red;
}
.test2 {
    color: green;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.