Javascript拖放和反弹效果

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

我正在做一个项目，在一个较大的div中包装了3个内容框。我正在考虑添加一个“获取报价”按钮，当你点击“获取报价”按钮时，它将取下周围较大的div，并将其放下（想想scooby doo（将书从书架中拉出，墙壁掉落）），当它击中时，它会反弹，就像它实际上有重量一样。然后在用户填写“获取报价”表单后返回

我希望这有点道理。

---

只需询问您是否需要澄清，或者您是否希望我发布一个它如何工作的草图。

这是JQuery UI中已经提供的功能。 你就是这样做的

<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>

#mydiv{
宽度：300px；
高度：300px；
背景：红色；
显示：无；
边缘顶部：30px；
}
点击我
$（“按钮”）。单击（函数（）{
$（'#mydiv'）。切换（'bounce'，300）
});

您可以在中看到一个工作示例 我使用了toggle，这意味着如果你再次点击按钮，效果将被恢复到隐藏框的状态。您可以使用许多可用的效果（失明、剪辑、下降、爆炸、折叠、突出显示、喘息、脉动、抖动、滑动、大小、比例）

如果您以前从未使用过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>

那么……到目前为止，我们尝试了什么？您知道jquery有一个动画方法可以为您实现这一点，对吗？你试过使用它吗？只是为了确保我们在同一页上。你能去那里，向下滚动菜单并选择

Math.easeOutBounce

，让我们知道这是否是你想要的吗？也许我误解了这个问题。@sdleihssirhc.easeOutBounce正是我想要的。也许这幅画会有帮助@sdleihssirhc告诉我我是否在正确的轨道上：使用jQuery UI。在较大的（覆盖）div上轻松跳出，但不要收缩，而是让它直接下降，并在另一个z索引层上有不同的内容，该层直接位于被删除内容的下方？@Taylor听起来不错，但如果没有看到示例，很难判断。“也许你可以一起投一个？”泰勒考虑接受答案，在信用到期的时候给予信用。谢谢，这解释得很好。对不起，反应非常慢，我一直很忙。