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 =)
| 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 | |
| |
| 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)} |
| { | |
| "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> |
@atk
I really made it as a proof of concept.
I think I could make it animate only what is necessary in 140 bytes.... I'll try!
edit:
Ok, there is no way thats gonna happen...