Написан ли этот скрипт «на костылях»?

Question

[JackShcherbakov]

Здравствуйте, прошу прощение за очень глупый вопрос, но можно ли было сделать тоже самое, но как-то попроще? Ибо в 20 строк обычный щелчок обрабатывать как-то странно.

Имеется:
Очень простой JavaScript скрипт с использованием jQuery: https://codepen.io/CitizenOne/pen/NwWJjZ

Answer 1

[0xD34F]

Да, можно сделать гораздо проще. Элементу задаёте transition:

#red {
  transition: opacity 0.2s;
}

Определяете класс, который будет изменять значение opacity:

#red.hidden {
  opacity: 0.5;
}

И переключаете его по клику:

$('#red').click(e => $(e.target).toggleClass('hidden'));

// или

document.querySelector('#red').addEventListener('click', e => {
  e.target.classList.toggle('hidden');
});

Comments

[JackShcherbakov]

Ах, да. Просто в старом jQuery transition не работал. Спасибо большое!

[Никита Кит]

JackShcherbakov, в jQuery никогда не было transition) Это css)))

[JackShcherbakov]

Никита Кит, Ну, я имею в виду, мол, когда через jQuery классы менялись, то это было неплавно даже со свойством transition

[Никита Кит]

JackShcherbakov, потому что ты наверняка добавил его в класс-состояние, а нужно непосредственно в класс-селектор