I Shar

мир глазами веб-разработчика

Показываем и скрываем выбранные элементы

Как реализовать эффекты fadeIn и fadeOut на Vanilla JS

2023-05-26 I Shar

время чтения 1 мин.

Итак, JQuery, как мне кажется, медленно, но верно, уходит в прошлое. Именно поэтому я решил перенести свои проекты с JQuery на чистый JavaScript (Vanilla JS). Результат получился вполне удовлетворительным.

Если Вы соберетесь поступить так же, помните, что все, что сделано на JQuery, можно сделать на чистом JavaScript. Правда, этот процесс займет чуть больше времени, потому что объем написанного Вами кода несколько увеличится.

Не скрою, что возможностью скрывать и показывать выбранные элементы с помощью JQuery я пользовался довольно часто. Но как же реализовать эффекты fadeIn и fadeOut на чистом JavaScript.

Оказалось, это достаточно просто:

// ** FADE OUT FUNCTION **
function fadeOut(el) {
    el.style.opacity = 1;
    (function fade() {
        if ((el.style.opacity -= .1) < 0) {
            el.style.display = "none";
        } else {
            requestAnimationFrame(fade);
        }
    })();
};
// ** FADE IN FUNCTION **
function fadeIn(el, display) {
    el.style.opacity = 0;
    el.style.display = display || "block";
    (function fade() {
        var val = parseFloat(el.style.opacity);
        if (!((val += .1) > 1)) {
            el.style.opacity = val;
            requestAnimationFrame(fade);
        }
    })();
};

Надеюсь, что код приведенный выше кому-нибудь пригодится.

Спасибо за внимание.

Перевод статьи Bruno Vieira “Vanilla JS FadeIn/Out”.