JavaScriptで fadeIn(),fadeOut() をつくってみた

サーバーサイド言語の前にJavaScriptが理解できてなかった。なので勉強中。

jQueryってとても便利なんですけど、入門者が10のコードを作るのに200のライブラリを読み込むってのはどうなのって感じがしてしまいます。 なので勉強をかねてfadeIn(),fadeOut()のスニペットをつくってみました。

というのも、カスタムUI作りたいな～と色々さがしてSweetAlertを見てたら、その中にシンプルでわかりやすいコードがあったので。(正直jQueryの中の fadeIn/fadeOut はややこしくて何やってるかわかりません。。。)
sweet-alert.jsでは引数がフレーム間隔指定だったので普通にduration指定にしてついでにCallbackも付けてみました。

今どきは古いIEを無視してCSSのtransitonでやればいいんでしょうけど、まぁ練習です。

function fadeOut(el, ms, fn) {
    ms = ms || 400;             // duration in milliseconds
    el.style.opacity = 1;
    var interval = 50,           // frame interval 50ms -> 20fps
        step = interval / ms;
    function tick() {
        el.style.opacity -= step;
        if (+el.style.opacity > 0) {
            setTimeout(tick, interval);
        } else {
            el.style.display = 'none';
            if (typeof fn === 'function') {
                fn();
            }
        }
    }
    tick();
}
function fadeIn(el, ms, fn) {
    if (+el.style.opacity < 1) {
        ms = ms || 400;         // duration in milliseconds
        el.style.opacity = 0;
        el.style.display = 'block';
        var interval = 50,       // frame interval 50ms -> 20fps
            step = interval / ms;
        function tick() {
            el.style.opacity = +el.style.opacity + step;
            if (+el.style.opacity < 1) {
                setTimeout(tick, interval);
            } else {
                if (typeof fn === 'function') {
                    fn();
                }
            }
        }
        tick();
    } else {
        el.style.display = 'block'; // fallback IE8
        if (typeof fn === 'function') {
            fn();
        }
    }
}

デモ

function fadeTest(div) {
    fadeOut(div,1500,function(){
        fadeIn(div,1500,function(){
            alert('Done!');
        });
    });
}

Click!

---

'+'付けると文字→数値に変換できるとか、再帰呼び出しの使い方とか勉強になりました。

なんか変なとこあったら教えてください。