UncleCoder.com

UncleCoder.com

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: 372

Edited on 06 Aug 2017



DEMO

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
 

 $(selector).animate({params},speed,callback);

Example

 

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

 

Full Code

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



Leave a Comment:


Advertisement