LearnFast.Ninja

Move div jQuery using animate function by id name

Create div with relative position. Create script element then write function that get one parameter. Create button for trigger the on click event who call your “Move_Class” function.

Step 1: Create div with relative position. 

<div id="My_id" style="position: relative">

    I want to move!

</div>
 
Step 2: Create script element then write function that get one parameter. 

<html>

<head>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    <script type="text/javascript">

        function Move_Class(Div_Id) {

            $(Div_Id).animate({ "left": 500 }, 300);

        }

    </script>

</head> 
 
Step 3: Create button for trigger the on click event who call your “Move_Class” function. 

<input type="button" value="Click Me!" onclick="Move_Class(My_id)"; />

 
Code: 

<html>

<head>

    <script type="text/javascript">

        function Move_Class(Div_Id) {

            $(Div_Id).animate({ "left": 500 }, 300);

        }

    </script>

</head>

<body>

    <div id="My_id" style="position: relative">

        I want to move!

    </div>

    <input type="button" value="Click Me!" onclick="Move_Class(My_id)"; />

</body>

</html> 
 
Result: 


Tags

jquery

jquery-animate jquery-tutorial-for-beginners