title: Raphael - Hover Animation
body: <p>Im trying to have a little animation when you hover over raphael elements.</p>
  
  <p>See Example here:</p>
  
  <p><a href="http://jsfiddle.net/GVEqf/24/" rel="nofollow">http://jsfiddle.net/GVEqf/24/</a></p>
  
  <p>When you hover over the square it scales up and when you stop hovering it scales down.</p>
  
  <p>The problem is: When you stop hovering over the element while it's still scaling up, it'll start scaling down and it will end up smaller then it was originally.</p>
  
  <p>You can see that when you hover over the element and then immediately move the mouse out of it.</p>
  
  <p>Here are the functions I use for the hovering animations:</p>
  
  <pre><code>hoverFunc = function() {
      rect.animate({transform: "...s1.6,1.6"}, 1000, 'bounce');
  };
  hideFunc = function() {
      rect.animate({transform: "...s0.625,0.625"}, 1000, 'bounce');      
  };
  </code></pre>