动画完成后，JQuery Animate with Effect 'Bounce'？

Question

我一直在这里、Google 等上寻找答案，但似乎无法完全确定这个问题。

我有一个 ID 为 #pin01 的图像。这是 map 上的一个图钉，我在 div 中将其向下动画化，落在 map 图像上(想想 Google map )。

我的 JQuery 运行得很好，是这样的:

$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);

我的 HTML 如下:

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

动画效果很好，图钉会淡入，并很好地落在 map 上。我想要的是在距离 div 顶部 305px 处进行弹跳，因此当它位于 map 上时，它会在最后产生一点弹跳。我想我会使用这个效果:

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

解决了 map 上一次弹跳的问题。

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

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

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

Answer 1

尝试:

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