Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create animations using relative value in jQuery ?

  • Last Updated : 19 Jul, 2021

Using jQuery’s animate() method, we can add different CSS animations to the elements. This is one of the powerful methods used for manipulating HTML elements and adding animation functionality in jQuery. The animation effect is created as we change the CSS styles in the animate() method.

To change the left or right or top or bottom of an element with a relative value, we use +=value or -=value in the CSS property, so that it changes the value at the current position to the relative increment or decrement with respect to the current position with the value given in the CSS property.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax: Using animate() method

$('selector').animate('direction'+='relative_value', other_parameters);

or



$('selector').animate('direction'-='relative_value', other_parameters);

 

The CSS() method can also be used directly by using the following syntax:

Syntax:

$('selector').css('direction'+='relative_value', 'property':'value');

or

$('selector').css('direction'-='relative_value', 'property':'value');

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
     
    <!-- Including jQuery  -->
    <script src=
            integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
            crossorigin="anonymous">
   </script>
    <style>
        h2 {
            color: #006600;
        }
  
        button {
            color: white;
            background-color: #006600;
            width: 100px;
            height: 30px;
        }
  
        body {
            text-align: center;
        }
  
        div {
            border: 2px solid black;
            border-radius: 10px;
            margin: 10px;
            height: 100px;
            width: 100px;
            position: relative;
            left: 0;
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h2>GeeksforGeeks</h2>
  
    <button id="btn-left"> Move Left</button>
    <button id="btn-right"> Move Right</button>
    <button id="btn-top"> Move Top</button>
    <button id="btn-bottom"> Move Bottom</button>
  
  
    <div id="GFG_IMAGE">
  
        <!-- Image added using img tag with src attribute -->
        <img src=
         height='100px' width='100px'>
        <img>
    </div>
  
    <script>
        $('#btn-right').click(function () {
            $('div').animate({ 'left': '+=100px' });
        });
        $('#btn-left').click(function () {
            $('div').animate({ 'left': '-=100px' }, "fast");
        });
        $('#btn-top').click(function () {
            $('div').animate({ 'top': '-=100px' }, "fast");
        });
        $('#btn-bottom').click(function () {
            $('div').animate({ 'top': '+=100px' }, "fast");
        });
    </script>
  
</body>
  
</html>

Output:

animate




My Personal Notes arrow_drop_up
Recommended Articles
Page :