Итак, 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”.