Javascript掉落和弹跳效果

时间:2011-02-19 18:48:00

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

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

我正在开发一个项目,它有3个内容框包含在一个更大的div中。我正在考虑添加一个“获取报价”按钮,当你点击“获取报价”时,它会占用较大的周围div并放弃它(想想scooby doo(拉出书柜和书本)墙壁下降))并且当它实际上具有重量时它会反弹。然后在用户填写“获取报价”表单后返回。

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

1 个答案:

答案 0 :(得分:10)

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