<?xml version="1.0" encoding="ISO-8859-1"?>

<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
	<channel>
		<title>Dynamic Drive Forums - Blogs - Master_script_maker</title>
		<link>http://www.dynamicdrive.com/forums/blog.php?19701-Master_script_maker</link>
		<description>Dynamic Drive help forum</description>
		<language>en</language>
		<lastBuildDate>Sun, 19 May 2013 09:55:41 GMT</lastBuildDate>
		<generator>vBulletin</generator>
		<ttl>10</ttl>
		<image>
			<url>http://www.dynamicdrive.com/forums/images/misc/rss.jpg</url>
			<title>Dynamic Drive Forums - Blogs - Master_script_maker</title>
			<link>http://www.dynamicdrive.com/forums/blog.php?19701-Master_script_maker</link>
		</image>
		<item>
			<title>Javascript Motion Effects Library</title>
			<link>http://www.dynamicdrive.com/forums/entry.php?10-Javascript-Motion-Effects-Library</link>
			<pubDate>Wed, 04 Mar 2009 16:39:20 GMT</pubDate>
			<description>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...</description>
			<content:encoded><![CDATA[<blockquote class="blogcontent restore">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.<a href="http://masterscriptmaker.co.cc/library/tween.html" target="_blank">Example1</a> <a href="http://masterscriptmaker.co.cc/library/tween2.html" target="_blank">Example2</a> <a href="http://masterscriptmaker.co.cc/library/tween3.html" target="_blank">Example3</a><br />
<br />
*I am working on color and background-color for version 0.9<br />
<div style="border:1px solid red; width: 95%; padding: 5px;"><b>Edit:</b> <i>Fixed a bug where the ease functions would last only half of the duration</i></div><br />
Jasme:<br />
<div class="bbcode_container">
	<div class="bbcode_description">Code:</div>
	<pre class="bbcode_code"style="height:372px;">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 &quot;height&quot;:
    case &quot;width&quot;:
    case &quot;top&quot;:
    case &quot;opacity&quot;:
    case &quot;color&quot;:
    case &quot;left&quot;:
      this.w[0]=&quot;style&quot;;
      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==&quot;slide&quot;) {
      this.slide();
      return;
    }
    if(this.r) {
      var y;
      if(h==&quot;in&quot;) {
        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==&quot;in&quot;) {
        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]==&quot;opacity&quot;) {
      this.get().filter=&quot;alpha(opacity=&quot;+Math.round(y)+&quot;)&quot;;
      y=y/100;
    }
    if(this.w[1]==&quot;color&quot;) {
      y=y&gt;255?255:y;
      var j=Math.round(y).toString(16);
      j=j.length&lt;2?&quot;0&quot;+j:j;
      y=&quot;#&quot;+j+j+j;
    } 
    this.get()[this.w[1]]=y;
    if(this.r) {
      if(this.x&gt;0) {
        this.x-=this.i;
        this.t=setTimeout((function(that) {return function() {that.ease(h);};})(this), 50);
        return;
      }
    } else {
      if(this.x&lt;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]==&quot;opacity&quot;) {
      this.get().filter=&quot;alpha(opacity=&quot;+y+&quot;)&quot;;
      y=y/100;
    }
    if(this.w[1]==&quot;color&quot;) {
      y=y&gt;255?255:y;
      var h=Math.round(y).toString(16);
      h=h.length&lt;2?&quot;0&quot;+h:h;
      y=&quot;#&quot;+h+h+h;
    } 
    this.get()[this.w[1]]=y;
    if(this.x&lt;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 &quot;in&quot;:
        a=&quot;in&quot;;
        break;
      case &quot;out&quot;:
        a=&quot;out&quot;;
        break;
      case &quot;none&quot;:
        a=&quot;slide&quot;;
        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]&amp;&amp;!this.p) {
        this.r=this.d[0][1];
        this.c=this.d.shift()[0];
        if(this.r&amp;&amp;this.c!=&quot;slide&quot;) {
          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);
  }
};</pre>
</div>How to use:<br />
<div class="bbcode_container">
	<div class="bbcode_description">Code:</div>
	<pre class="bbcode_code"style="height:36px;">var tween=new tweener(duration in seconds, id, end value, what to change(can be anything accessible by getElementById)[, function to run on completion]);</pre>
</div></blockquote>

]]></content:encoded>
			<dc:creator>Master_script_maker</dc:creator>
			<guid isPermaLink="true">http://www.dynamicdrive.com/forums/entry.php?10-Javascript-Motion-Effects-Library</guid>
		</item>
	</channel>
</rss>
