0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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