12

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.

stebesplace
  • 1,251
  • 3
  • 13
  • 19

2 Answers2

16

Try with:

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 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? – stebesplace Apr 20 '12 at 17:59
  • I've setup a demo page with a link above to see what's happening. – stebesplace Apr 20 '12 at 18:06
  • 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. – stebesplace Apr 20 '12 at 18:19
0

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

r0m4n
  • 3,474
  • 3
  • 34
  • 43