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
Tweet
About The Author
No comments:
Post a Comment