I've been hunting around for an answer on here, Google, etc., and can't seem to quite nail this one.
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).
My JQuery, which works just great, is this:
$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
and my HTML is as follows:
<img src="images/pin_blue.png" id="pin01" />
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:
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
I figured the final code would go something like this:
$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
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.
I have tried combining, nesting these, etc., nothing seems to be working.
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.
SOLUTION
Removed:
$('#pin01').animate({ opacity: 0}, 0).delay(1000);
$('#pin01').animate({ opacity: 1, top: "350px" }, 500);
Replaced both with a single line from the below answer:
$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});
Solved the issue of the bounce once on the map.
To add in some fade functionality, I wrote it as follows:
$('#pin01').animate({ opacity: '0' });
$('#pin01').delay(500).show().animate({ top: 305, opacity: '1' }, {duration: 1000, easing: 'easeOutBounce'});
There may be a cleaner way to do the fade, but this worked for my example.
Try with:
$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});