Master_script_maker

I have created a motion effects library and aptly named it Javascript Motion Effects Library or the Jasme Library. I created it mainly to allow people to do complex effects with little code. Jasme works in firefox 3, safari, IE 7, and all other modern browsers. Jasme can move almost all variables of an object* and is very easy to use. When multiple actions are placed on the object, Jasme goes through a queue. You may use the library as long as you keep the label intact.Example1 Example2 Example3

*I am working on color and background-color for version 0.9

Edit: Fixed a bug where the ease functions would last only half of the duration

Jasme:

Code:

function tweener(duration, id, end, what) {
  /******************************************/
  /*Javascript Motion Effects Library v. 0.85*/
  /********(c) Master Script Maker***********/
  /********www.masterscriptmaker.co.cc*******/
  /********Do not remove this label.*********/
  /******************************************/
    
  this.id=id;
  this.e=end;
  this.dur=duration;
  this.l=this.e/100;
  this.n=this.dur*1000/50;
  this.i=this.l*2.5/this.n/2;
  this.x=0;
  this.t=setTimeout(function() {return false;}, 10000);
  this.c=false;
  this.f=arguments[4]||function() {return false;};
  this.d=[];
  this.p=false;
  this.r=false;
  this.w=[];
  
  switch(what) {
    case "height":
    case "width":
    case "top":
    case "opacity":
    case "color":
    case "left":
      this.w[0]="style";
      break;
    default:
      this.w[0]=false;
  }
  this.w[1]=what;
}
tweener.prototype = {
  get: function() {
    if(!this.w[0]) {
      return document.getElementById(this.id);
    } else {
      return document.getElementById(this.id).style;
    }
  },
  
  changeDuration: function(d) {
    this.dur=d;
    this.n=this.dur*1000/50;
    this.i=this.l*2.5/this.n/2;
  },
  
  ease: function (h) {
    clearTimeout(this.t);
    if(h=="slide") {
      this.slide();
      return;
    }
    if(this.r) {
      var y;
      if(h=="in") {
        y=(100-(-16*Math.pow(2.5-this.x, 2)+80*(2.5-this.x)));
      } else {
        y=(-16*Math.pow(this.x, 2)+80*this.x);
      }
    } else {
      if(h=="in") {
        y=(-16*Math.pow(this.x, 2)+80*this.x);
      } else {
        y=(100-(-16*Math.pow(2.5-this.x, 2)+80*(2.5-this.x)));
      }
    }
    y*=this.l;
    if(this.w[1]=="opacity") {
      this.get().filter="alpha(opacity="+Math.round(y)+")";
      y=y/100;
    }
    if(this.w[1]=="color") {
      y=y>255?255:y;
      var j=Math.round(y).toString(16);
      j=j.length<2?"0"+j:j;
      y="#"+j+j+j;
    } 
    this.get()[this.w[1]]=y;
    if(this.r) {
      if(this.x>0) {
        this.x-=this.i;
        this.t=setTimeout((function(that) {return function() {that.ease(h);};})(this), 50);
        return;
      }
    } else {
      if(this.x<2.5) {
        this.x+=this.i;
        this.t=setTimeout((function(that) {return function() {that.ease(h);};})(this), 50);
        return;
      }
    }
    this.done();
  },
  
  slide: function() {
    clearTimeout(this.t);
    y=this.x*(this.l*100/this.n);
    if(this.r) {
      y=this.l*100-this.x*(this.l*100/this.n);
    }
    if(this.w[1]=="opacity") {
      this.get().filter="alpha(opacity="+y+")";
      y=y/100;
    }
    if(this.w[1]=="color") {
      y=y>255?255:y;
      var h=Math.round(y).toString(16);
      h=h.length<2?"0"+h:h;
      y="#"+h+h+h;
    } 
    this.get()[this.w[1]]=y;
    if(this.x<this.n) {
      this.x++;
      this.t=setTimeout((function(that) {return function() {that.slide();};})(this), 50);
    } else {
      this.done();
    }
  },
  
  go: function(how) {
    var a;
    switch(how) {
      case "in":
        a="in";
        break;
      case "out":
        a="out";
        break;
      case "none":
        a="slide";
        break;
    }
    var arg=arguments[1]||false;
    this.d.push([a, arg]);
    this.start();
  },
  
  stop: function() {
    clearTimeout(this.t);
    this.p=false;
  },
  
  start: function() {
    if(this.c) {
      this.p=true;
      this.ease(this.c);
    } else {
      if(this.d[0]&&!this.p) {
        this.r=this.d[0][1];
        this.c=this.d.shift()[0];
        if(this.r&&this.c!="slide") {
          this.x=2.5;
        }
        this.p=true;
        this.ease(this.c);
      }
    }
  },
  
  done: function() {
    this.f();
    this.p=false;
    this.x=0;
    this.c=false;
    this.r=false;
    this.t=setTimeout((function(that) {return function() {that.start();};})(this), 200);
  }
};

How to use:

Code:

var tween=new tweener(duration in seconds, id, end value, what to change(can be anything accessible by getElementById)[, function to run on completion]);