title: Animating SVG path on hover with jQuery and Raphael
body: <p>I'm trying to animate a segment of a path in Raphael when an element (<code>a#blog</code>) is hovered. I've been able to get the animated change to run on load with this JS and <a href="http://jsfiddle.net/z8hbe/6/" rel="nofollow">fiddle</a>:</p>
  
  <pre><code>var paper = Raphael(0, 0, 150, 150)
  var pth = paper.path("M0 36L0 46L10 46" ).animate({path: "M0 16L0 46L10 46" }, 2000);
  pth.attr({stroke: "#000", "stroke-width": "2"});
  </code></pre>
  
  <p><strong>But when I try to bind the event to .hover() with jQuery, it won't run</strong>. Any ideas of what I may be doing wrong? Here's that JS and a <a href="http://jsfiddle.net/Q5phQ/1/" rel="nofollow">fiddle</a>:</p>
  
  <pre><code>var paper = Raphael(0, 0, 150, 150)
  var pth = paper.path("M0 36L0 46L10 46" );
  pth.attr({stroke: "#000", "stroke-width": "2"});
  
  $("#blog").hover(function () {
      pth.animate({path: "M0 16L0 46L10 46" }, 2000);
  }, function() {
      pth.animate({path: "M0 36L0 46L10 46" }, 2000);
  });
  </code></pre>
  
  <p>I've found the Raphael docs a little tough to interpret, so if anyone out there has input it's appreciated!</p>