Javascript 掉落和反弹效果答案

【问题标题】：Javascript Drop and Bounce EffectJavascript 掉落和反弹效果
【发布时间】：2011-06-30 11:34:22
【问题描述】：

我似乎找不到像我想要的那样工作的 javascript（jQuery 或其他）效果。我希望有人可以帮助我。

我正在开发一个项目，该项目在一个较大的 div 中包含 3 个内容框。我正在考虑添加一个“获取报价”按钮，当您单击“获取报价”时，该按钮将占用较大的周围 div 并放下它（想想史酷比（从书柜中拉出书并墙壁掉落））并让它在撞击时像它实际上有重量一样反弹。然后在用户填写“获取报价”表单后返回。

我希望这有点意义。只需询问您是否需要澄清，或者您是否希望我发布其工作原理的草图。

【问题讨论】：

所以呃...到目前为止有什么要尝试的？你知道 jquery 有一个 animate 方法可以为你做到这一点，对吧？你试过用那个吗？
只是为了确保我们在同一页面上，here's an easing demo。你能去那里，向下滚动菜单并选择Math.easeOutBounce，然后让我们知道这是否是你要找的吗？也许我误解了这个问题。
@sdleihssirhc .easeOutBounce 正是我想要的。也许这张图可能会有所帮助。 stashbox.org/1070306/…
@sdleihssirhc 告诉我我是否走在正确的轨道上：在较大（覆盖）的 div 上使用 jQuery UI .easeOutBounce 但不是缩小，而是让它直接下降并在另一个 z 上具有不同的内容- 被删除内容正下方的索引层？
@Taylor 听起来不错，但如果不看例子就很难判断。也许你可以拼凑一个JSBin？

标签： javascript jquery html jquery-ui drop-down-menu

【解决方案1】：

这是 JQuery UI 中已经可用的功能。 http://jqueryui.com/demos/show/。你就是这样做的

<style type="text/css">
#mydiv{
    width:300px;
    height:300px;
    background:red;
    display:none;
    margin-top:30px;
}
</style>

<button>clickme</button>
<div id="mydiv"></div>

<script type="text/javascript">
$('button').click(function(){
    $('#mydiv').toggle('bounce',300)
});
</script>

您可以在http://jsfiddle.net/TUFaw/ 看到一个工作示例

我使用了切换，这意味着如果您再次单击按钮，效果将被退回以隐藏框。您可以使用许多可用的效果（盲、剪辑、掉落、爆炸、折叠、突出显示、粉扑、脉动、摇晃、滑动、大小、缩放）

如果您以前从未使用过 jQuery，请确保包含所需的 CSS 和 JS 文件。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

【讨论】：

@taylor 考虑接受答案以在到期时给予信用。
谢谢，这解释得很好。
很抱歉回复太慢了，我一直很忙。