jQuery Effects - Animate

jQuery Effects - Animate: Learn about the jQuery animate() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 24, 2022

jQuery animate() Method

Animating anything means giving some effects of its own. There are various already defined effect methods present in jQuery. But still, it is possible to create our own custom effects for an element using the animate() method. This method helps to create custom animations using the CSS properties for the element. Only the CSS properties whose values can be passed as numerical can be used over here for animations. The properties which take non-numeric values such as – color name, etc. cannot be defined here.

animate() Method Syntax

$('selector').animate({property:'value'}, speed, callback);

The speed and callback are the two parameters its takes apart from the CSS properties. These are optional, i.e., they can be passed but not necessarily. The speed here indicates the speed of the elements that have to be animated. It can be specified as – slow, fast, normal, or even in milliseconds. The default value of the speed is normal. The callback refers to the function which gets called when the animate() method finishes its task.

Again, this method does not show results for a hidden element on the webpage. It will neither show an error nor will show results for it.

The following example shows the implementation of the animate() method. The image shows some results when the button is clicked by the user.

jQuery animate() Method Example

<!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'
            });
        })
    });
  </script>
</html>

Output:

jQuery Effects - SlideToggle

jQuery - Effects: animate() Using Different Ways

Comments and Discussions!

Load comments ↻