动画完成后，JQuery动画效果’弹跳’？

我一直在这里寻找答案，谷歌等等，似乎无法解决这个问题。

我有一张ID为＃pin01的图片。 这是地图上的一个图钉，我在div中制作动画，登陆地图图像（想想谷歌地图）。

我的JQuery非常棒，是这样的：

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

我的HTML如下：

动画效果很好，引脚会消失，然后就可以很好地落到地图上了。 我想要的是，它从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'}); 

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

为了添加一些淡入淡出function，我写了如下：

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

Answer 2

您可以在animate函数中使用marginTop而不是top 。