动画完成后带有效果'反弹'的JQuery Animate？

Posted 2023-05-08

【中文标题】动画完成后带有效果\'反弹\'的JQuery Animate？

【英文标题】：JQuery Animate with Effect 'Bounce' after animation is complete?动画完成后带有效果'反弹'的JQuery Animate？

【发布时间】：2012-05-02 07:51:04

【问题描述】：

我一直在这里、谷歌等网站上寻找答案，但似乎无法完全确定这一点。

我有一张 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);

这会导致反弹，但它会返回到大头针的原始起始位置，而不是保留 305 像素的移动。我尝试在效果上放置一个 top: ，但没有奏效。

我尝试过组合、嵌套这些等，但似乎没有任何效果。

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

解决方案

已删除：

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

可能有一种更简洁的方法来进行淡入淡出，但这适用于我的示例。

【参考方案1】：

尝试：

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

【讨论】：

大头针落下，落在正确的空间，然后跳下几百个像素（可能是原来的 305 像素）并反弹，然后自己回到着陆位置。所以它是 85%，只是不知道为什么要考虑另一个跳跃？

我已经设置了一个演示页面，上面有一个链接，看看发生了什么。

我删除了 $('#pin01').animate( opacity: 0, 0).delay(1000);并用上面的代码替换了第二行。你猜怎么了？有效！如果可以的话，我会在我的原始帖子中提及修改，或者作为评论。

【参考方案2】：

您可以在动画函数中使用marginTop 代替top。