title: JQuery Animate with Effect 'Bounce' after animation is complete?
body: <p>I've been hunting around for an answer on here, Google, etc., and can't seem to quite nail this one.</p>
  
  <p>I have an image with an ID of #pin01. This is a pin on a map that I have animating down within a div, landing on an image of a map (think Google map).</p>
  
  <p>My JQuery, which works just great, is this:</p>
  
  <pre><code>$('#pin01').animate({ opacity: 0}, 0).delay(500);
  $('#pin01').animate({ opacity: 1, top: "305px" }, 500);
  </code></pre>
  
  <p>and my HTML is as follows:</p>
  
  <pre><code>&lt;img src="images/pin_blue.png" id="pin01" /&gt;
  </code></pre>
  
  <p>The animation works great, and the pin fades in, and drops on to the map just fine. What I'd like, is a bounce after it has been positioned 305px from the top of the div, so when it's on the map, it will give a little bounce at the end. I thought I'd use this effect:</p>
  
  <pre><code>$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
  </code></pre>
  
  <p>I figured the final code would go something like this:</p>
  
  <pre><code>$('#pin01').animate({ opacity: 0}, 0).delay(500);
  $('#pin01').animate({ opacity: 1, top: "305px" }, 500);
  $('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
  </code></pre>
  
  <p>That results in a bounce, but it returns back to the original starting position for the pin, not retaining the 305px movement. I tried placing a top: on the effect, which didn't work. </p>
  
  <p>I have tried combining, nesting these, etc., nothing seems to be working. </p>
  
  <p>If anyone has any other thoughts, curious to see how to get this to function properly. I think it's a simple tweak, just can't seem to figure it out.</p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p><em>Removed:</em></p>
  
  <pre><code>$('#pin01').animate({ opacity: 0}, 0).delay(1000);
  $('#pin01').animate({ opacity: 1, top: "350px" }, 500);
  </code></pre>
  
  <p><em>Replaced both with a single line from the below answer:</em></p>
  
  <pre><code>$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});
  </code></pre>
  
  <p>Solved the issue of the bounce once on the map.</p>
  
  <p><em>To add in some fade functionality, I wrote it as follows:</em></p>
  
  <pre><code>$('#pin01').animate({ opacity: '0' });
  $('#pin01').delay(500).show().animate({ top: 305, opacity: '1' }, {duration: 1000, easing: 'easeOutBounce'});
  </code></pre>
  
  <p>There may be a cleaner way to do the fade, but this worked for my example.</p>