JQuery, на мой взгляд, постепенно теряет свою актуальность. Поэтому я решил перевести свои проекты с JQuery на чистый JavaScript (Vanilla JS). Итоги оказались вполне положительными.
Если вы тоже планируете сделать этот шаг, помните, что все, что можно сделать с помощью JQuery, можно реализовать и на чистом JavaScript. Конечно, этот процесс может занять больше времени, так как объем кода увеличится.
Один из часто используемых мной приемов в JQuery — это скрытие и показ выбранных элементов. Но как же реализовать эффекты fadeIn и fadeOut на чистом JavaScript?
Оказалось, это довольно просто:
Функция fadeOut
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= 0.1) < 0) {
el.style.display = "none";
} else {
requestAnimationFrame(fade);
}
})();
}Функция fadeIn
function fadeIn(el, display) {
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += 0.1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}Эти функции позволяют реализовать эффекты плавного появления и исчезновения элементов без использования JQuery.
Заключение
Надеюсь, приведенный выше код будет полезен тем, кто решит перейти с JQuery на чистый JavaScript. Этот переход может потребовать немного больше усилий, но результаты того стоят, особенно если учитывать перспективу отказа от сторонних библиотек и зависимости от них.
