jsはjqueryフレームワークを真似てフェードアウトアニメーション

2771 ワード

//IIFE                   ,        ,           ;
(function () {
    var push = [].push;//       push    
    var splice = [].splice;//       solice    
    var forEach = [].forEach;//       forEach    
    /**
     *       window.O
     * @param query
     */
    function select(query) {
        return new select.prototype.init(query);
    }

    /**
     *                    
     * @type {{}}
     */
    select.prototype = {
        me: this,
        length: 0,
        splice: function () {
        },
        get: function (index) {
            index = (index + this.length) % this.length;
            return this[index]; //     dom
        },
        eq: function (index) {
            return select(this.get(index));
        },
        each: function (callback) {
            forEach.call(this, callback);
            return this; //     
        },
        extend: function () {//      
            var obj;//    
            for (var i = 0, l = arguments.length; i < l; i++) {
                obj = arguments[i];
                for (var k in obj) {
                    if (obj.hasOwnProperty(k)) { //         
                        this[k] = obj[k];//     this            
                    }
                }
            }
        },
        init: function (query) {
            //  dom  
            var doms;
            doms = document.querySelectorAll(query);//    dom  
            push.apply(this, doms);//      0,1,2       push  
        }
    };


    select.oo = select.prototype.init.prototype = select.prototype;

    select.oo.extend({
        //target eg:{in or out time} {in:1000}
        fade: function (mode, time) {
            var inti = 30;//      
            this.each(function (el) {
                var du = inti / time;
                var sudu = 0;
                //    100%    0%
                el.timer = setInterval(function () {
                    sudu += du;
                    console.log(sudu);
                    if ('in' === mode) {
                        el.style.opacity = sudu;
                    } else {
                        el.style.opacity = 1 - sudu;
                    }
                    if (sudu > 1) {
                        clearInterval(el.timer);
                        if (mode === 'in') {
                            el.style.display = block
                        } else {
                            el.style.display = none
                        }
                    }
                }, inti);
            })
        },
        fadeIn: function (time) {
            this.fade('in', time)
        },
        fadeOut: function (time) {
            this.fade('out', time)
        }
    });

    window.O = select;

})();