我一直在这里、谷歌等网站上寻找答案，但似乎无法完全确定这一点。
我有一个 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 的移动。我尝试在效果上放置一个 top: ，但没有奏效。
我尝试过组合、嵌套这些等，似乎没有任何效果。
如果有人有任何其他想法，很想知道如何让它正常运行。我认为这是一个简单的调整，只是似乎无法弄清楚。
解决方案
删除：
$('#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'});
可能有一种更清洁的方法来进行淡入淡出，但这适用于我的示例。