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

Creating a Bouncing DIV / Panel using jQuery

No comments:

Post a Comment