How to animate a div using jQuery

Last updated on January 9th, 2023 at 10:19 am

This is a quick tutorial to simply animate div within browser window using jQuery. This is not a complex tutorial. We are just using the basic set of commands to animate a div.

Table of Contents

• Get jQuery
• Add Style
• Add Div and Button
• Include Javascript

Get jQuery

Load the jQuery by using the code below

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

Add Style

Simple div style, add your own style if required.

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

Add Div and Button

Write the HTML code to create a div along with a button which when clicked will move the div left and right

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

Include Javascript

Once these are done place this javascript at the end of the page. As you can see we are getting the click event from “go” which is the id of the button we created above.

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

You need to adjust the pixel value above to determine how far the div can move left and right.

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

DEMO