animate.js

/* animate JS
/
/  var Element = document.getElementById('id');
/  animate(Element).start({opacity:0},1000,function(){...},'easeInOutQuad')
/
/  @attributes = [array]{ prop : chenge in value (int) }
/  @duration = int (msec)
/  @callback = function(){...} 
/  @easing = 'name of type' (strings)
/
*/

var animate = function(Element){
	return new animate.prototype.init(Element);
};

animate.prototype = {
	'init' : function init(Element){
		var i = 0
		, length = Element.length;
				
		if(length){
			for(;i < length; i++){
				this[i].Element[i]
			}
			this.length = i;
		}else{
			this[0] = Element;
			this.length = 1;
		}
		this.name = 'animation object';
		return this;
	},
	'start': function start(attributes, duration, callback, easing) {
	    var self = this,
	        duration = duration ? duration : 700,
	        easing = easing ? easing : 'easeInOutQuad', j = 0, length = self.length;
	
	    for(;j < length; j++){
	
	        var _this = self[j],
	            i = 0,
	            style = _this.style,
	            default_status, value_reg, e, time, on_value;
	
	        for (var key in attributes) {
	            on_value = attributes[key];
	
	            if (key === 'scrollTop') {
	                self.scrollTop(on_value, duration, callback, easing);
	            } else {
	                if (style[key]) {
	                    default_status = style[key];
	                } else if (document.defaultView.getComputedStyle) {
	                    default_status = document.defaultView.getComputedStyle(_this, null)[key];
	                } else {
	                    default_status = _this.currentStyle[key];
	                };
	                value_ex = default_status.match(/[a-z]+/g), default_status = parseInt(default_status.match(/[0-9]+/g))
	            }
	            change_in_value = on_value - default_status;
	            _this.animation = setInterval(function () {
	                time = 20 * i
	                style[key] = (animate.easing[easing](time, default_status, change_in_value, duration)) + value_ex;
	                if (time >= duration) {
	                    clearInterval(_this.animation);
	                    style[key] = on_value + value_ex;
	                    if (callback) {
	                        callback.call(_this);
	                    };
	                    delete _this.animation;
	                }
	                i = i + 1
	            }, 20)
	        }
	    }
	},
	'scrollTop': function scrollTop(on_value, duration, callback, easing) {
	    var j = 0, length = self.length;
	
	    for(;j < length; j++){
	
	        var _this = this[j],
	            i = 0,
	            value = _this.scrollTop,
	            change_in_value = on_value - value;
	
	        _this.animation = setInterval(function () {
	            if (20 * i >= duration) {
	                clearInterval(_this.animation);
	                scrollTop = on_value;
	                if (callback) {
	                    callback.call(_this)
	                };
	                delete _this.animation;
	            }
	            _this.scrollTop = animate.easing[easing](20 * i, value, change_in_value, duration);
	            i = i + 1;
	        }, 20)
	    }
	}
};

animate.prototype.init.prototype = animate.prototype;

animate.easing = {
    easeInOutQuad: function(t, b, c, d) {
        t/=d / 2;
        if (t < 1)
            return c / 2 * t * t + b;
        t--;
        return - c / 2 * (t * (t-2)-1) + b
    },
    easeInOutCubic: function(t, b, c, d) {
        t/=d / 2;
        if (t < 1)
            return c / 2 * t * t * t + b;
        t -= 2;
        return c / 2 * (t * t * t + 2) + b
    },
    easeInOutQuart: function(t, b, c, d) {
        t/=d / 2;
        if (t < 1)
            return c / 2 * t * t * t * t + b;
        t -= 2;
        return - c / 2 * (t * t * t * t-2) + b
    },
    easeInOutSine: function(t, b, c, d) {
        return - c / 2 * (Math.cos(Math.PI * t / d)-1) + b
    },
    easeInOutExpo: function(t, b, c, d) {
        t/=d / 2;
        if (t < 1)
            return c / 2 * Math.pow(2, 10 * (t-1)) + b;
        t--;
        return c / 2 * ( - Math.pow(2, -10 * t) + 2) + b
    }
};