DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Kalatravas has posted 29 posts at DZone. View Full User Profile

Using JQuery To Animate A Div

12.01.2011
| 3655 views |
  • submit to reddit
        // Animate dimensions of a Div  on mouse-over 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Using jQuery plug-in to animate a div</title> 

<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script type="text/javascript"> 

$(document).ready(function() { 

$("#container").hover( 

// expand the height of the container 
function() { 
$(this).animate({"height": 200}, 300); 
$(this).animate({"width": 800}, 300); 

}, 

// shrink the height of the container 

function() { 
$(this).animate({"height": 100}, 300); 
$(this).animate({"width": 300}, 300); 

} 

); 

}); 

</script> 

<style type="text/css"> 

body { 

padding: 0; 

margin: 0; 

background: #fff; 

font: 1em Arial, Helvetica, sans-serif; 

color: #000; 

} 

#wrapper { 

width: 960px; 

margin: 0 auto; 

} 

#header, #content, #footer { 

padding: 20px; 

} 

h2 { 

font-size: 1.1em; 

font-weight: normal; 

padding: 0; 

margin: 0 0 15px 0; 

} 

div#container { 

width: 300px; 

height: 100px; 

padding: 10px; 

background: #f00; 

overflow: hidden; 

} 

</style> 

</head> 

<body> 

<div id="wrapper"> 

<div id="header"> 

<h1>Using jQuery to animate a div</h1> 

<h2>Header section</h2> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> 

</div> 

<div id="content"> 

<div id="container"> 

<h2>Sample container</h2> 

<p>This is the content of the sample container.</p> 

</div> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> 

</div> 

<div id="footer"> 

<h2>Footer section</h2> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> 

</div> 

</div> 

</body> 

</html>