raphael js hover slows animation -


here i've got going

http://jsfiddle.net/lono1981/cvmex/2/

var paper = raphael("paper");  var gear1 = paper.image( "https://dl.dropboxusercontent.com/u/55552239/testing%20stuff/gear1.png",20,20,171,171,171);  var gear2 = paper.image( "https://dl.dropboxusercontent.com/u/55552239/testing%20stuff/gear2.png",175,30,43,43,43);  var gear3 = paper.image( "https://dl.dropboxusercontent.com/u/55552239/testing%20stuff/gear3.png",190,70,84,84,84);  var anim1 = raphael.animation({transform: "r360"}, 4000).repeat(infinity); gear1.animate(anim1);  var anim2 = raphael.animation({transform: "r-360"}, 3500).repeat(infinity); gear2.animate(anim2);  var anim3 = raphael.animation({transform: "r-360"}, 3500).repeat(infinity); gear3.animate(anim3);  var f_in = function() {     gear1.stop(); };  var f_out = function() { gear1.animate(anim1); };  gear1.hover (f_in,f_out); 

basically, once hover stops , restarts animation, animation slows down , doesn't repeat properly.

what doing wrong?

fixed it: demo

var anim1 = raphael.animation({transform: "...r360"}, 4000).repeat(infinity); gear1.animate(anim1); 

you have add ... in transform() whenever want append transform every time hover.

good luck!


Comments

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -