title: How would you animate something so that it follows a curve?
body: <p>If I have<br>
  <code>&lt;div id="curve" style="position:relative; height:100px; width:100px; /&gt;</code></p>
  
  <p>How would I make it move on a curve? I've googled and everything but can't seem to find another example that would call two functions at once. This is the kind of code I would like, but doesn't work:</p>
  
  <pre><code>$('#curve').click(function () {
      $(this).animate(
          { 
              top: 400,
              left = $(this).left() + $(this).left()*$(this).left()
          },
          'slow',
          function() { $(this).animate( { left: 600 }, 'fast' ); }
      );
  });
  </code></pre>
  
  <p>Even if that's not correct code, I believe animate only takes "destinations" for something to go to, so a dynamic destination wouldn't work I think. What am I looking for to make this work?</p>
  
  <p>EDIT:: I'll definitely pick up that plugin, but I'm also wonder why this bit of code doesn't work as I'd expect it to.</p>
  
  <p>Here's another attempt using a for loop and the delay method</p>
  
  <pre><code>$('#curve').click(function () {
      for (var i=0; i&lt;400; i++ )
      {
          $(this).delay(1000);
          $(this).css( { top: i, left: i*1.5 } );
      }
  });
  </code></pre>
  
  <p>Except it just instantly goes to that position, no delay or anything. so if it was starting at [0,0], as soon as I click it it teleports to [400,600]. Why doesn't the delay work?</p>