How to create animations using relative value in jQuery ?️‍🔥

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.

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= 
"https://code.jquery.com/jquery-3.6.0.min.js"
            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>w3wiki</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= 
"https://write.w3wiki.net/static/media/Group%20210.08204759.svg" 
         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