Question

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

我有一张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移动。我尝试放置一个顶部：效果，这不起作用。

我尝试过组合，嵌套这些等等，似乎没有任何工作。

如果有人有任何其他想法，很想知道如何让它正常运作。我认为这是一个简单的调整，似乎无法弄明白。

解

移除：

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

可能有更简洁的方法来淡化，但这适用于我的例子。

Answer 1

尝试：

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

Answer 2

您可以在动画功能中使用marginTop代替top。

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

2 个答案: