JQuery Animate with Effect 'Bounce' after animation is complete?

Question

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.

Mercymerdith

Answer 1

Try with:

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});

Cosmos

The pin falls, lands in the right space, then jumps down a couple hundred pixels (possibly the original 305px) and bounces, then puts itself back into the landed position. So it's 85% there, just not sure why it takes into account another jump? – Mercymerdith

I've setup a demo page with a link above to see what's happening. – Mercymerdith

I removed the $('#pin01').animate({ opacity: 0}, 0).delay(1000); and replaced the second line with your above code. Guess what? It worked! I'll mention the modification in my original post if I can, or as a comment. – Mercymerdith

Answer 2

You can use marginTop instead of top in your animate function.

Indoxyl