Free programming examples and instructions

Move a div using jQuery animate

Code and demo for how to move a div using jQuery animate.

by Athil

Posted on 04 Jun 2017 Category: jQuery Views: 590

Edited on 06 Aug 2017


Hi, Here I am going to show how to move a div using jQuery animate. By using CSS properties we can animate.

Syntax of jQuery animate




$("#divid").animate({left: '300px'}); 


Full Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <title>Demo for move a div using jQuery animate</title>
       <script type="text/javascript" src="js/jquery.min.js" ></script>
    <h1> Demo for moving a div uisng jQuery animate </h1>
    <button onclick="move();"> Move </button>
       <div id="divid" style="background:#0094ff;height:80px;width:80px;position:absolute;"> </div>
        function move()
            $("#divid").animate({ left: '300px' });

Leave a Comment: