Jquery animate div
Jquery animate div
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.
Jquery animate div,