I have been working on a jquery like library here is the code:
(function(){
var int,
method;
function Jist(s){
return new Jist.fn.init(s);
};
Jist.fn = Jist.prototype ={
init : function(s){
if(!s){
return this;
}
else{
this.length = 1;
if (typeof s === "object"){
this[0] = s;
}
else if(typeof s === "string"){
var obj;
obj = document.querySelectorAll(s);
this[0] = obj;
this.elem = this[0];
}
return this;
}
},
}
Jist.fn.init.prototype = Jist.fn;
Jist.fn.init.prototype = {
print : function(txt){
for(var i=0; i<this.elem.length; i++) {
this.elem[i].innerHTML = txt;
}
return this;
},
pop : function(msg){
alert(msg);
return this;
},
click : function(callback){
for(var i=0; i<this.elem.length; i++) {
this.elem[i].addEventListener("click",callback,false);
}
return this;
},
fadeOut : function(ms) {
var elem = this.elem;
var opacity = 1,
interval = 50,
gap = interval / ms;
function func() {
opacity -= gap;
for(var i=0; i<elem.length; i++) {
elem[i].style.opacity = opacity;
}
if(opacity <= 0) {
window.clearInterval(fading);
for(var i=0; i<elem.length; i++){
elem[i].style.display = 'none';
}
}
}
var fading = window.setInterval(func, interval);
return this;
},
fadeIn : function(ms) {
var opacity = 0,
interval = 50,
gap = interval / ms,
elem = this.elem;
for(var i=0; i<elem.length; i++){
elem[i].style.display = 'block';
elem[i].style.opacity = opacity;
}
function func() {
opacity += gap;
for(var i=0; i<elem.length; i++){
elem[i].style.opacity = opacity;
}
if(opacity >= 1) {
window.clearInterval(fading);
}
}
var fading = window.setInterval(func, interval);
return this;
}
};
window.Jist = window._ = Jist;
})();
In jquery you can write al line of code like this:
$("#logo").fadeOut(1000).fadeIn(1000);
. I would like to be able to have my library function like that but I cant figure out how to do that.
I would really like it if someone could show me how to do this.
Thanks.