Home > Programming, Servers & Scripts >

FadeIn/FadeOut without jQuery (5)

10-24-2020 10:58 PM #1 jeremie (Moderator)
FadeIn/FadeOut without jQuery

While cleaning a few landers and removing jQuery, I realized that the most common reasons to use jQuery is for animations and slideshows. The most common one being the fadeIn / fadeOut. Here is a small script that I found and modified, to replicate the jQuery fadeIn / fadeOut functions.

Feel free to ask questions on how it works and I will explain more if needed.

Basic fadeOut: make the element disappear

Code:

function fadeOut(element) {
    element.style.opacity = 1;
    (function fade() {
        if ((element.style.opacity -= 0.05) < 0) {
            element.style.display = "none";
        } else {
            requestAnimationFrame(fade);
        }
    })();
}

Basic fadeIn: make the element appear

Code:

function fadeIn(element) {
    element.style.opacity = 0;
    element.style.display = "block";

    (function fade() {
        var val = parseFloat(element.style.opacity);
        if (!((val += 0.1) > 1)) {
            element.style.opacity = val;
            requestAnimationFrame(fade);
        }
    })();
}

jQuery-equivalent fadeOut: make the element disappear with a duration

Code:

function fadeOut(element, duration = false) {
    element.style.opacity = 1;
    (function fade() {
        if ((element.style.opacity -= 0.1) < 0) {
            element.style.display = "none";
        } else {
            if (duration) {
                setTimeout(() => {
                    requestAnimationFrame(fade);
                }, duration / 10);
            } else {
                requestAnimationFrame(fade);
            }
        }
    })();
}

jQuery-equivalent fadeIn: make the element appear with a duration

Code:

function fadeIn(element, duration = false) {
    element.style.opacity = 0;
    element.style.display = "block";
    (function fade() {
        var val = parseFloat(element.style.opacity);
        if (!((val += 0.1) > 1)) {
            element.style.opacity = val;
            if (duration) {
                setTimeout(() => {
                    requestAnimationFrame(fade);
                }, duration / 10);
            } else {
                requestAnimationFrame(fade);
            }
        }
    })();
}

And a full page for you to test

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FadeIn/Out Test</title>
    <style>
        * {
            padding: 20px;
            margin: 20px;
        }

        #square  {
            background-color: chartreuse;
            display: block;
            width: 200px;
            height: 200px
        }
    </style>
</head>

<body>
    <input type='number' id='duration' value='500'>
    <button id='btn-fadein'>FADE IN</button>
    <button id='btn-fadeout'>FADE OUT</button>
    <div id='square'></div>


    <script>
        var d = document,
            sq = d.getElementById('square');

        d.getElementById('btn-fadein').addEventListener('click', () => {
            if (dur = parseInt(d.getElementById('duration').value)) {
                fadeIn(sq, dur);
            } else {
                bfadeIn(sq);
            }
        }, false)

        d.getElementById('btn-fadeout').addEventListener('click', () => {
            if (dur = parseInt(d.getElementById('duration').value)) {
                fadeOut(sq, dur);
            } else {
                bfadeOut(sq);
            }
        }, false)


        /* bfadeOut: make the element disappear

function bfadeOut(element) {
    element.style.opacity = 1;
    (function fade() {
        if ((element.style.opacity -= 0.05) < 0) {
            element.style.display = "none";
        } else {
            requestAnimationFrame(fade);
        }
})();
        }
        */

        /* bfadeIn: make the element appear
        function bfadeIn(element) {
            element.style.opacity = 0;
            element.style.display = "block";

            (function fade() {
                var val = parseFloat(element.style.opacity);
                if (!((val += 0.1) > 1)) {
                    element.style.opacity = val;
                    requestAnimationFrame(fade);
                }
            })();
        }
        */

        /* fadeOut: make the element disappear with duration
        */
        function fadeOut(element, duration = false) {
            element.style.opacity = 1;
            (function fade() {
                if ((element.style.opacity -= 0.1) < 0) {
                    element.style.display = "none";
                } else {
                    if (duration) {
                        setTimeout(() => {
                            requestAnimationFrame(fade);
                        }, duration / 10);
                    } else {
                        requestAnimationFrame(fade);
                    }
                }
            })();
        }

        /* fadeIn: make the element appear with duration
        */
        function fadeIn(element, duration = false) {
            element.style.opacity = 0;
            element.style.display = "block";
            (function fade() {
                var val = parseFloat(element.style.opacity);
                if (!((val += 0.1) > 1)) {
                    element.style.opacity = val;
                    if (duration) {
                        setTimeout(() => {
                            requestAnimationFrame(fade);
                        }, duration / 10);
                    } else {
                        requestAnimationFrame(fade);
                    }
                }
            })();
        }
    </script>
</body>

</html>

10-25-2020 08:16 AM #2 plutus (Member)
FadeIn/FadeOut without jQuery

Okay... but why? This can be done with css animation and few lines of js.

I just checked and animation is supported in all browsers except Opera Mini - so this one, and really ancient browser versions would be the only cases that it is worth adding js version :P
https://developer.mozilla.org/en-US/...CSS_Animations
https://caniuse.com/css-animation

CSS animation solution (modern approach):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FadeIn/Out Test</title>
    <style>
        * {
            padding: 20px;
            margin: 20px;
        }


        #square {
            background-color: chartreuse;
            display: block;
            width: 200px;
            height: 200px
        }


        @keyframes fadeIn {
            0% {
                opacity: 0.0;
                display: block;
            }
            100% {
                opacity: 1.0;
            }
        }


        @keyframes fadeOut {
            0% {
                opacity: 1.0;
            }
            100% {
                opacity: 0.0;
                display: none;
            }
        }


        :root {
            --animation-duration: 5s
        }


        .fadeIn {
            animation-name: fadeIn;
            animation-duration: var(--animation-duration);
            animation-fill-mode: forwards;
        }


        .fadeOut {
            animation-name: fadeOut;
            animation-duration: var(--animation-duration);
            animation-fill-mode: forwards;
        }
    </style>
</head>
<body>
<button id='btn-fadein'>FADE IN</button>
<button id='btn-fadeout'>FADE OUT</button>
<div id='square'></div>
<script>
    var d = document,
        sq = d.getElementById('square');


    d.getElementById('btn-fadein').addEventListener('click', () => {
        sq.classList.remove('fadeOut');
        sq.classList.add('fadeIn');
    }, false)


    d.getElementById('btn-fadeout').addEventListener('click', () => {
        sq.classList.remove('fadeIn');
        sq.classList.add('fadeOut');
    }, false)
</script>
</body>

This is super simple to use - you just have to add/remove fadeIn or fadeOut class to your element if you wish to execute animation in given moment

jQuery solution in that case is one-liner:
Fade in:

Code:

$('#square').addClass('fadeIn').removeClass('fadeOut')

Fade out:

Code:

$('#square').addClass('fadeOut').removeClass('fadeIn')

10-25-2020 12:08 PM #3 jeremie (Moderator)

I know that CSS animation is the modern approach. If I start a lander from scratch, yes, I would use that solution too.

Yet:
- not everyone has the knowledge of CSS keyframes.
- when I rip a lander and just want to remove the jQuery module, I find is faster not to have to dig into the CSS and just do a straight replacement.

Originally Posted by plutus

jQuery solution in that case is one-liner

You realize that the whole purpose of this thread is to offer a solution to remove the jQuery module? It might be one line, but if you have to load a full library just to execute that one line, it does not make sense.

10-25-2020 12:31 PM #4 plutus (Member)

Originally Posted by jeremie

- not everyone has the knowledge of CSS keyframes.

Not everyone has a knowledge of 70+ lines of js w\ requestAnimationFrame calls as well :P

Originally Posted by jeremie

when I rip a lander and just want to remove the jQuery module, I find is simpler not to have to dig into the CSS

No CSS digging is required here - this CSS can be copy-pasted and used across every single lander later on with slight change to the animation duration if needed.

In both cases it all ends up on copy-pasting some snippet to make it work so it's just matter of personal preference.

Both solutions will work, yours have broader browser support but is overall a bit longer and mine is shorter, gives some additional room for adjustments in keyframes but will fail miserably on really old devices.

Originally Posted by jeremie

You realize that the whole purpose of this thread is to offer a solution to remove the jQuery module?

You are right - jquery example wasn't that much needed here.

10-25-2020 12:58 PM #5 jeremie (Moderator)

Originally Posted by plutus

In both cases it all ends up on copy-pasting some snippet to make it work so it's just matter of personal preference.

Exactly. Now the forum members have 2 great solutions to choose from. I will definitely keep yours in mind for my next landers

Home > Programming, Servers & Scripts >