jQuery animate() Using Different Ways

jQuery animate() Method Examples: Learn about the different ways of animation(), i.e., the animate() method using the different ways.
Submitted by Pratishtha Saxena, on September 24, 2022

Previously, we have learnt about the jQuery effect animate() method. Here, we are going to get to know the different ways it can be used.

This method can be used in various ways according to the need. There are different ways of declaring the CSS properties within this method to get the appropriate results. We'll be discussing the following four ways to use animate() method:

jQuery animate() using multiple properties
jQuery animate() using relative values
jQuery animate() using color values
jQuery animate() using predefined values

1) jQuery animate() using multiple properties

When the "animate() method is defined for an element, it can either take single CSS property as its parameter or even multiple CSS properties & values together in one go. This will help to style the element accordingly. When multiple properties are declared together, they are then separated by a comma (,) in between them.

Syntax:

$('selector').animate({prop1: 'val1', prop2: 'val2', ...});

This way many properties can be defined altogether for a single element. One thing to be kept in mind here is that when we declare CSS property over here, we need to follow the Camel case for the property names. For example, background-color will be written as backgroundColor.

jQuery example of animate() method using multiple properties

<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - Animate</h2>
    <p>Click the button to custom animate the image on the page.</p>
    <button>Animate</button>
    <hr>
    <img id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            $('img').animate({
                height: '200px',
                width: '200px',
                marginLeft: '400px',
                marginTop: '200px'
            });
        })
    });
  </script>
</html>

Output:

jQuery animate() Using Different Ways (1)

2) jQuery animate() using relative properties

When "animate() method is defined for an element, it can also be defined relatively. This means that when the properties for the element are declared, then instead of writing the exact numerical value, we can relatively increase or decrease it by some factor. By relative we mean to use the original values of the element and using -= or += to decrease or increase it. If the element has its top margin as 50px initially, then it can be set to 150px by declaring "marginTop" as +=100px.

Syntax:

$('selector').animate({prop1: '+=val1', prop2: '-=val2', ...});

This way, we do not have to re-write the actual value, instead, we can use the original value as a reference and increase or decrease it according to the need. Also, an important point over here is that, with this when the button is clicked again and again then the values reduce or increase on each click.

jQuery example of animate() method using relative properties

<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - Animate</h2>
    <p>Click the button to custom animate the image on the page.</p>
    <button>Animate</button>
    <hr>
    <img id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('img').animate({height: '-=100px', width: '-=100px'});
        })
    });
  </script>
</html>

Output:

jQuery animate() Using Different Ways (2)

3) jQuery animate() using predefined values

Predefined values are the keywords that are already been defined by jQuery for usage. Hence, using those terms as values for the properties can make the animation look more finished. Predefined keywords like the show, hide, and toggle can be used for a specific property.

Syntax:

$('selector').animate({prop1: 'val1', prop2: 'val2', ...});

jQuery example of animate() method using predefined values

<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - Animate</h2>
    <p>Click the button to custom animate the image on the page.</p>
    <button>Animate</button>
    <hr>
    <img id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('img').animate({height: '200px', width: 'toggle',});
        })
    });
  </script>
</html>

Output:

jQuery animate() Using Different Ways (3)

jQuery - Effects: Animate

jQuery Effects - Stop Animations

Comments and Discussions!

Load comments ↻