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, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) 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 is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: