我一直在这里寻找答案，谷歌等等，似乎无法解决这个问题。
我有一张ID为＃pin01的图片。这是地图上的一个图钉，我在div中制作动画，登陆地图图像（想想谷歌地图）。
我的JQuery非常棒，是这样的：
$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
我的HTML如下：
<img src="images/pin_blue.png" id="pin01" />
动画效果很好，引脚会消失，然后就可以很好地落到地图上了。我想要的是，它从div的顶部定位305px后反弹，所以当它在地图上时，它会在最后给出一点反弹。我以为我会用这个效果：
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
我认为最终的代码会是这样的：
$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
这导致弹跳，但它返回到针的原始起始位置，而不是保持305px运动。我尝试放置一个顶部：效果，这不起作用。
我尝试过组合，嵌套这些等等，似乎没有任何工作。
如果有人有任何其他想法，很想知道如何让它正常运作。我认为这是一个简单的调整，似乎无法弄明白。
解
删除：
$('#pin01').animate({ opacity: 0}, 0).delay(1000);
$('#pin01').animate({ opacity: 1, top: "350px" }, 500);
用以下答案中的单行代替两者：
$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});
解决了地图上弹跳一次的问题。
为了添加一些淡入淡出功能，我写了如下：
$('#pin01').animate({ opacity: '0' });
$('#pin01').delay(500).show().animate({ top: 305, opacity: '1' }, {duration: 1000, easing: 'easeOutBounce'});
可能有一种更简洁的方法来淡化，但这适用于我的例子。