williammalo/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A clone of the jquery animate function for NEW BROWSERS ONLY!
For now, you need to add a vendor prefix for it to work, but it will work in future browsers just fine.
To use the function, add it as an element prototype and use it just like you would use the jquery animate function:
element.animate(properties,duration,callback)
Also, I am aware that my coding skills suck a bit =)

  
## annotated.js
function(a,         //object containing properties
         b,         //duration in milliseconds
         c,         //callback function
w,x,y,z){           //placeholders
w=(z=this.style)[x="transition"];        //save state of the transition property
z[x]="all "+b+"ms";                      //set transition property to be the same length as b
for(y in a)z[y]=a[y];                    //apply new properties
setTimeout(function(){c();z[x]=w},b)
}                                        //run callback and reset transition to it's original state, after the transition has run


## index.js
function(a,b,c,w,x,y,z){w=(z=this.style)[x="transition"];z[x]="all "+b+"ms";for(y in a)z[y]=a[y];setTimeout(function(){c();z[x]=w},b)}

## package.json
{
  "name": "JQAnimate",

  "description": "A clone of the jquery animate function for NEW BROWSERS ONLY!",

  "keywords": [
    "jquery",
    "animate",
    "transition",
    "css"
  ]
}

## test.html
<!DOCTYPE html>
<script>

//this is just a function to add vendor prefixes =) https://gist.github.com/2188750
prefixr = function(a,b,c,d){for(b in c=["Moz","Webkit","Ms","O"])if((d=c[b]+a[0].toUpperCase()+a.slice(1))in(new Image).style)a=d;return a}

Element.prototype.animate = function(a,b,c,w,x,y,z){w=(z=this.style)[x=prefixr("transition")];z[x]="all "+b+"ms";for(y in a)z[y]=a[y];setTimeout(function(){c();z[x]=w},b)
}

properties =  {background:"#f00",color:"#fff"}
duration   =  5e3
callback   =  function(){alert("Finished transition!")}


document.body.animate(properties,duration,callback)

</script>
	function(a, //object containing properties
	b, //duration in milliseconds
	c, //callback function
	w,x,y,z){ //placeholders
	w=(z=this.style)[x="transition"]; //save state of the transition property
	z[x]="all "+b+"ms"; //set transition property to be the same length as b
	for(y in a)z[y]=a[y]; //apply new properties
	setTimeout(function(){c();z[x]=w},b)
	} //run callback and reset transition to it's original state, after the transition has run
	{
	"name": "JQAnimate",

	"description": "A clone of the jquery animate function for NEW BROWSERS ONLY!",

	"keywords": [
	"jquery",
	"animate",
	"transition",
	"css"
	]
	}
	<!DOCTYPE html>
	<script>

	//this is just a function to add vendor prefixes =) https://gist.github.com/2188750
	prefixr = function(a,b,c,d){for(b in c=["Moz","Webkit","Ms","O"])if((d=c[b]+a[0].toUpperCase()+a.slice(1))in(new Image).style)a=d;return a}

	Element.prototype.animate = function(a,b,c,w,x,y,z){w=(z=this.style)[x=prefixr("transition")];z[x]="all "+b+"ms";for(y in a)z[y]=a[y];setTimeout(function(){c();z[x]=w},b)
	}

	properties = {background:"#f00",color:"#fff"}
	duration = 5e3
	callback = function(){alert("Finished transition!")}


	document.body.animate(properties,duration,callback)

	</script>