动画完成后，JQuery动画效果“跳动”？

我一直在这里寻找答案，谷歌等，并且似乎无法完全明白这一点。动画完成后，JQuery动画效果“跳动”？

我有一个ID为＃pin01的图像。这是地图上的一个图钉，我在一个div内进行了动画制作，登陆地图图像（认为Google地图）。

我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的运动。我试图放置一个顶部：效果，这是行不通的。

我试过结合，嵌套这些等，没有什么似乎工作。

如果有人有任何其他的想法，好奇看看如何得到这个功能正常。我认为这是一个简单的调整，似乎无法弄清楚。

SOLUTION

删除：

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

解决反弹问题，一旦上：

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

从下面的答案一行替换两个地图。

在某些褪色功能添加，我写如下：

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

有可能是做褪色更清洁的方式，但这个工作对我的例子。

来源

2012-04-20 stebesplace

尝试用：

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

来源

2012-04-20 17:56:00

现在测试这个... – stebesplace 2012-04-20 17:57:04

引脚下降，落在右侧空间，然后向下跳过几百像素（可能是原始的305像素）并弹起，然后将自己放回到着陆位置。所以这里有85％，只是不确定为什么它考虑到另一次跳跃？ – stebesplace 2012-04-20 17:59:28

我已经安装了一个演示页面，上面有一个链接，看看发生了什么。 – stebesplace 2012-04-20 18:06:36

您可以在动画功能使用marginTop，而不是top。

来源

2012-04-20 18:18:27 r0m4n

动画完成后，JQuery动画效果“跳动”？

回答

相关问题