Creating a Bouncing DIV / Panel using jQuery

Lately, I have been doing some crazy UI stuff with jQuery and posting them over here and here. I was recently experimenting with animating the HTML Div’s/ ASP.NET Panels. The animations by default work on the height property and animates it downwards. I wanted to reverse the behavior, creating a bouncing effect from bottom to top. Here’s how i did it using jQuery:

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title>Bouncing DIV'S</title>
<style type='text/css'>
.parent
{
    position:relative;
    height:500px;
    width:100%;
    border:1px solid;
}
.myDiv
{
    position:absolute;
    top:50%;
    height:250px;
    width: 50%;
    margin-top:-125px;
    margin-left:250px;
    border:1px solid;
}

</style>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.myDiv').hover(
            function() {
                $(this).animate({ top: '25%', height: '300px' }, 'slow');
            },
            function() {
                $(this).animate({ top: '50%', height: '250px' }, 'slow');
            });
    });

</script>
</head>
<body>
<form id="form1" >
<div class="parent">
    <div class="myDiv">
    </div>
</div>
</form>
</body>
</html>

You can even use ASP.NET Panels instead of plain HTML DIV’s. Just replace the div’s with this markup

<asp:Panel ID="Panel1" runat="server" CssClass="parent">
     <asp:Panel ID="Panel2" runat="server" CssClass="myDiv">
    </asp:Panel>
</asp:Panel>

You can view a Live demo of the Bouncing DIV over here. Just hover your mouse on the inner div and watch it bouncing.

Live Demo: http://www.dotnetcurry.com/Demos/jQueryBouncingDiv/Bounce.htm

'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?


			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal