Javascript Drop and Bounce Effect

Question

I can't seem to find a javascript(jQuery or other) effect that works like I want it to. I was hoping someone can help me out.

I am working on a project that has 3 content boxes wrapped within a larger div. I am thinking of adding a "Get A Quote" button that will take the larger surrounding div and drop it when you click on the "Get A Quote" (think scooby doo(pull book out of bookcase and the wall drops)) and have it bounce when it hits like it actually has weight. Then go back up after the user has filled out the "Get A Quote" form.

I hope that makes a marginal bit of sense. Just ask if you would like clarification or if you would like me to post a sketch of how it works.

Answer 1

This is an already available feature in JQuery UI. http://jqueryui.com/demos/show/. This is how you do it

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

You can see a working example at http://jsfiddle.net/TUFaw/

I used toggle which means if you click on the button again, the effect will be revered back to hide the box. You can use many of the available effect (blind, clip, drop, explode, fold, highlight, puff, pulsate, shake, slide, size, scale)

If you never worked with jQuery before, make sure you include the required CSS and JS files.

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