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;
})();