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
Post a Comment