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



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

No comments: