如何实现jQuery幻灯片/弹跳动画？

Question

基本上我想让DIV滑出并稍微弹跳一下它超过它的最终尺寸然后返回。不知道如何解释，请参阅下图中的尝试：

--------------------->  //Slides out
                 <----  //Then "bounces" back to it's final size

我使用切换动画完成了第一部分：

$("#second").animate({ width: 'toggle' }, 85);

我认为我可以通过以下方式获得反弹效果：

$("#second").animate({ width: 'toggle' }, 85).animate({ width: 'toggle' }, 75);

但它消失了。在阅读了animate / toggle文档后，我想这是有道理的，但我仍然不确定如何获得所需的功能。有什么建议吗？

奖励积分，如果你可以这样做，那么滑动div的内容被切断，而不是被推到下一行。

Answer 1

我知道最简单的方法是使用jQuery Easinh插件（http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js）并使用“easeOutBack”方法。

$("#second").animate({ width: 'toggle' }, 85, "easeOutBack");

Answer 2

我能够以这种方式实现它：

$("#second").animate({ width: 'toggle' }, 250).animate({ width: '-=10' },185);

似乎是最直接的方式。

Answer 3

您需要添加complete处理程序。 http://api.jquery.com/animate/