title: Smooth transform SVG vertically using jQuery
body: <p>In my index.html I have:</p>
  
  <p><code>&lt;ellipse id="ellipseRed" cx="500" cy="1300" rx="40" ry="150" /&gt;</code></p>
  
  <p>In my javascript file I have:</p>
  
  <pre><code>$('ellipse').click(function() {
    $(this).attr('transform', 'translate(0 -350) rotate(0)');
  });
  </code></pre>
  
  <p>The transform works, but it is not smooth. That is it seems to "jump" to its new location rather than transition into it.</p>
  
  <p>I want to click the SVG ellipse and have it slowly move vertically up. Then If I click it again, have it slowly move down.</p>
  
  <p>I'm new html, SVG, and jQuery/Javascript</p>
  
  <p>Am I even going about this the right way? Should I be using jQuery to animate this SVG?</p>