动画完成后，带有“弹跳”效果的 JQuery 动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10251109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Animate with Effect 'Bounce' after animation is complete?
提问by stebesplace
I've been hunting around for an answer on here, Google, etc., and can't seem to quite nail this one.
我一直在这里、谷歌等上四处寻找答案，但似乎无法完全确定这个答案。
I have an image with an ID of #pin01. This is a pin on a map that I have animating down within a div, landing on an image of a map (think Google map).
我有一个 ID 为 #pin01 的图像。这是地图上的一个图钉，我在 div 中设置了动画，降落在地图图像上（想想谷歌地图）。
My JQuery, which works just great, is this:
我的 JQuery 效果很好，它是这样的：
$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
and my HTML is as follows:
我的 HTML 如下：
<img src="images/pin_blue.png" id="pin01" />
The animation works great, and the pin fades in, and drops on to the map just fine. What I'd like, is a bounce after it has been positioned 305px from the top of the div, so when it's on the map, it will give a little bounce at the end. I thought I'd use this effect:
动画效果很好，图钉淡入淡出，然后落到地图上就好了。我想要的是在距离 div 顶部 305px 后的反弹，所以当它在地图上时，它会在最后产生一点反弹。我想我会使用这个效果：
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
I figured the final code would go something like this:
我想最终的代码会是这样的：
$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);
That results in a bounce, but it returns back to the original starting position for the pin, not retaining the 305px movement. I tried placing a top: on the effect, which didn't work.
这会导致反弹，但它会返回到 pin 的原始起始位置，而不是保留 305px 的移动。我尝试在效果上放置一个 top: ，但没有用。
I have tried combining, nesting these, etc., nothing seems to be working.
我尝试过组合、嵌套这些等，但似乎没有任何效果。
If anyone has any other thoughts, curious to see how to get this to function properly. I think it's a simple tweak, just can't seem to figure it out.
如果有人有任何其他想法，很想知道如何让它正常运行。我认为这是一个简单的调整，只是似乎无法弄清楚。
SOLUTION
解决方案
Removed:
删除：
$('#pin01').animate({ opacity: 0}, 0).delay(1000);
$('#pin01').animate({ opacity: 1, top: "350px" }, 500);
Replaced both with a single line from the below answer:
用以下答案中的一行替换了两者：
$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});
Solved the issue of the bounce once on the map.
解决了地图上弹跳一次的问题。
To add in some fade functionality, I wrote it as follows:
为了添加一些淡入淡出功能，我写了如下：
$('#pin01').animate({ opacity: '0' });
$('#pin01').delay(500).show().animate({ top: 305, opacity: '1' }, {duration: 1000, easing: 'easeOutBounce'});
There may be a cleaner way to do the fade, but this worked for my example.
可能有更干净的方法来做淡入淡出，但这对我的例子有用。
回答by Roko C. Buljan
Try with:
尝试：
$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});
回答by r0m4n
You can use marginTopinstead of topin your animate function.
您可以在您的动画功能中使用marginTop而不是top。
