Jquery animate div

Last updated on January 17th, 2016 at 09:14 am

Jquery Animate Div

This is a quick tutorial to simply animate a div using jquery. This is not a complex tutorial. We are just using the basic set of commands to animate a div. The div will simply slide in and out and disappear then come back again. Looks interesting here is the script.
Lets load the jquery library first.

<script src="http://demo.mistonline.in/jquery-1.2.3.min.js" type="text/javascript"></script>

Some style

div {
   position: relative;
   background-color: #abc;
   width: 140px;
   height: 140px;
   float: left;
   margin: 5px;
}

Place the HTML, OR div what ever you need to animate after the library is loaded.

<div id="example"><h1>This is going to move</h1></div>	
<button value="Move" id="go">Move</button></center>

Once these are done place this javascript at the end of the page.

$("#go").click(function(){
  $("#example").animate({"left": "350px"}, "slow");
  $("#example").animate({"left": "-345px"}, "slow");
  $("#example").animate({"left": "5px"}, "slow");  
});

Thats it. We are done you are ready to animate the div by pressing the MOVE button.

DEMO