JQuery动画效果'；反弹'；动画完成后？

我一直在寻找关于here、Google等的答案，但似乎不能完全确定这一点

我有一张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" />

我想最终的代码应该是这样的：

$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

这会导致反弹，但会返回到销的原始起始位置，而不会保持305px移动。我试着在效果上加一个顶部：但没有效果

我试过组合、筑巢等，但似乎没有任何效果

如果有人有任何其他想法，想知道如何让它正常工作。我认为这是一个简单的调整，只是似乎无法理解

解决方案

删除：

用下面答案中的一行替换这两个选项：

解决了地图上的反弹问题

为了添加一些淡入淡出功能，我编写了如下内容：

<img src="images/pin_blue.png" id="pin01" />

可能有一种更干净的方法来进行淡入淡出，但这对我的示例有效。

尝试以下方法：

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

---

您可以在动画功能中使用

marginTop

而不是

top

。

插针落下，落在正确的空间中，然后跳下几百像素（可能是原来的305px）并反弹，然后将自身放回落下位置。这是85%，只是不确定为什么它会考虑到另一个跳转？我已经设置了一个演示页面，上面有一个链接来查看发生了什么。我删除了$（'#pin01'）。animate（{opacity:0}，0）。delay（1000）；并用上述代码替换第二行。你猜怎么着？成功了！如果可以的话，我会在我原来的帖子中提到修改，或者作为评论。

$('#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'});

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