Core points

• jQuery's animate() method is a versatile tool that allows developers to create custom animations by gradually changing the CSS properties of elements over a specified duration.
The
• animate() method is only suitable for numerical CSS properties and is not suitable for extremely complex animations because performance issues may occur.
• The method mainly comes in two forms: animate(properties[, duration][, easing][, callback]) and animate(properties[, options]), and most parameters are optional. These parameters control aspects of the animation, such as duration, easing function, and what happens after the animation is completed.
• Developers can create more complex animations by linking multiple animate() methods together, allowing animation sequences to be executed in the order of calls. This feature is called "queuing", which enhances the functionality and flexibility of jQuery animations.

jQuery is an excellent library that has changed the way thousands of developers handle projects over the years. When creating jQuery, CSS cannot create complex animations and can only use JavaScript. jQuery is a great help in animations as several methods were created for this purpose. Although it comes with some simple animations (fadeIn(), hide(), slideDown(), etc.), to keep it lightweight, the library provides a very flexible way to create whatever we want animation. This is the subject of this article. jQuery's animate() is a animate() wrapper method, which means it operates on a set of previously selected DOM elements wrapped by jQuery. This method allows you to apply your own custom animation effects to elements in your collection. To do this, we must provide a set of CSS style properties and values ​​that will be reached at the end of the animation. The intermediate value of the style during the animation effect (which is automatically processed by the animation engine) is determined by the effect duration and easing function, which we will discuss soon. The CSS-style attribute list that can be animated is limited to those properties that accept numeric values. This value can be an absolute value (for example, 200) or a relative value from the starting point. For absolute values, jQuery assumes that pixels are default units. We can also specify other units such as em, rem, or percentage. To specify a relative value, we must preface or = to indicate the relative target value in the positive or negative directions, respectively. Now that we have some understanding of -=, it's time to look at its signature and its parameters. animate()

Signature and Parameters

• animate(properties[, duration][, easing][, callback])
• animate(properties[, options])

About parameters, there is a lot to say:

• properties (Object): A hash table containing the value that should be reached at the end of the animation.
• duration (Number|String): Effect duration (in milliseconds) or one of the predefined strings: "slow" (600 milliseconds), "normal" (400 milliseconds), or "fast" ( 200 ms). Default is "normal".
• easing (String): The name of the easing function to be used when performing the conversion. The default value is "swing".
• callback (Function): A function that is executed when animating for each animation element.
• options (Object): A hash table containing a set of options to pass to the method. The available options are as follows:
  • always (Function): A function called when the animation is completed or stopped but not completed.
  • complete (Function): Function executed after the animation is completed.
  • done (Function): The function called after the animation is completed.
  • duration (String|Number): Same as described above.
  • easing (String): Same as described above.
  • fail (Function): Function executed when the animation fails.
  • progress (Function): Functions that run after each step of the animation. This function is called only once per animation element.
  • queue (Bolean): If the animation must be placed in the effect queue (more on this later). The default value is true.
  • specialEasing (Object): A hash table of one or more CSS properties whose value is an easing function.
  • start (Function): Function executed at the beginning of the animation.
  • step (Function): A function that calls each animation attribute of each animation element.

The term Easy is used to describe the way in which frame speeds are processed and animate. When the queue option is set to true, we allow the animation to be run sequentially, and when set to false, the animation is allowed to be run in parallel. This gives us a lot of power that we can use as we please. In the rest of this article, we will demonstrate some practical applications of these parameters to let you experience the possibility of animate().

Example usage

In this section, we will build some demonstrations to make the power of animate(). Remember that this approach is not suitable for very, very complex animations due to issues related to the performance and fluency of the animation.

Run a single animation

Running a single animation is very easy, just call the method once. For example, we might want to move elements from one side of the box to the other. To illustrate this animation, we will set two div elements, one inside the other. We will style them so that the inner div has a red background. The code to do this is as follows. HTML:

<div class="rectangle">
  <div class="square-small"></div>
</div>

CSS:

.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}

Using the power of animate(), we move small squares from one side to the other:

$('.rectangle')
  .find('.square-small')
  .animate({
    left: 280
  }, 'slow');

In this code, we specify that the left attribute is the only attribute to be animated. We set the animation duration to the preset value slow (600 milliseconds). We use absolute values ​​to move the internal <div> (with class <code>.square-small). This value is based on the container width we set with the CSS code listed earlier. This solution is not very flexible because if we change the width of the container, the internal <div> will not reach the other side (if we set a wider width on the container), or will exceed it (if we set a narrower width ). One solution is to set the value of the <code><div> attribute based on the calculation of the current width of the external and internal <code>left as shown below:

left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()

Run multiple animations in loop

Executing multiple animations on one element or group of elements is as easy as linking calls to animate() . In this example, we will move a small square as it moves along the perimeter of the inner hourglass of the large square (rather than a rectangle). To build this demo, we will use the following tag:

<div class="square-big">
  <div class="square-small"></div>
</div>

For styles, we need to use the same CSS we used for .square-small as well as the following styles to set the style of the outermost square:

.square-big {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

The final step is to write JavaScript code to draw the four lines that make up the ideal hourglass perimeter. Starting from the upper left corner of the outermost square, we have to animate the small square until it reaches the lower right corner of the large square. Small squares must move diagonally to produce effects. Once it reaches the bottom right corner, we have to move it to the bottom left corner. It then has to reach the upper right corner and finally return to its original position. In introducing this demo, we said we want to perform infinite animations. So we have to find a way to run the entire animation again, once the last step is completed. To do this, we can wrap the call to the four linked animate() calls in one function, so we have a function to reference. We can then use the aforementioned complete callback and IIFE to run the animation again when the last step is completed. The result of converting this description into code is as follows:

(function animation() {
  var options = {
    duration: 800,
    easing: 'linear'
  };

  $('.square-big')
    .find('.square-small')
    .animate({
      left: 280,
      top: 280
    }, options)
    .animate({
      left: 0
    }, options)
    .animate({
      left: 280,
      top: 0
    }, options)
    .animate({
      left: 0
    }, $.extend(true, {}, options, {
      complete: function() {
        animation();
      }
    }));
})();

In the above code, please note how we use the options variable so that we don't have to write the same parameters over and over when calling animate() . Also, because we had to add the options callback the last time we used complete, we used the extend() method of jQuery.

More callback operations

As our last example, we will set the options, start and complete properties of the progress parameter (the second parameter of the second form). The purpose is to disable the button that runs the animation when clicked while the animation is running. After that, we want to show the percentage of animation completion. For this example, we will modify the first demo we built. According to the description, we have to add a button and an element (we will use a span) to display the percentage. This change results in the following tag:

<div class="rectangle">
  <div class="square-small"></div>
</div>

We don't have to add more styles, so we can jump to the discussion of JavaScript code. In order to run the animation only when the button is clicked, we have to add a handler to the button's click event. Inside the handler, we use jQuery's prop() method to disable and enable the buttons based on whether the animation is running or completed. Finally, we use the second parameter passed to the handler attached to the progress option to display the percentage of animation completion. The generated code looks like this:

.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}

Conclusion

This article discusses what you can do with the animate() method of jQuery. We introduce its signature and its accepted parameters. In this article, we explore three example animations. This article only briefly introduces the possibility of animate(). In fact, with a little patience and creativity, we can create truly complex and beautiful animations.

Frequently Asked Questions (FAQ)

What is the jQuery animate method and how does it work?

jQuery animate method is a powerful tool that allows you to create custom animations. It works by gradually changing the CSS properties of an element, with the duration specified by you. You can animate any CSS attributes, but you must specify the attributes using camel case, such as marginLeft instead of margin-left. The animate method also allows you to specify easing functions that control the speed of the animation, as well as the callback functions that are executed after the animation is completed.

How to stop or pause jQuery animation?

jQuery provides a stop() method to stop the animation. This method stops the currently running animation on the selected element. If you want to pause the animation, it will be a little more complicated, as jQuery doesn't provide a built-in method for this. However, you can do it by using plugins or manually controlling the animation progress.

Can I use jQuery animate animation to handle multiple properties at once?

Yes, you can use the jQuery animate method to animate multiple CSS properties at once. You just need to include all the properties to be animated in the properties object. For example, you can animate the width and height of an element at the same time.

How do I use step function in jQuery animate?

The step function in jQuery animate is a callback function that is executed in every step of the animation. This function passes two parameters: now, which is the current value of the animation property; fx, which is an object containing information about the animation. You can use the step function to create complex animations or debug animations.

Can I use jQuery animate for non-numeric CSS properties?

No, the jQuery animate method is only applicable to numeric CSS properties. If you try to animate non-numeric properties such as color or background color, it won't work. However, you can animate these properties using plugins such as jQuery UI or jQuery Color.

How to use jQuery animate to link animation?

You can link jQuery animations by simply calling multiple animate methods one by one. jQuery will execute the animation in the order of call. This is called "queuing", and it is a powerful feature of jQuery animation.

Can I use jQuery animate to create a sliding effect?

Yes, you can create a sliding effect using the jQuery animate method. You can do this by animate the height or width of the element. However, jQuery also provides slideDown, slideUp and slideToggle methods, which are easier to use if you just want to create simple sliding effects.

How to make my jQuery animation smoother?

There are multiple ways to make your jQuery animations smoother. One way is to use easing functions that control the speed of the animation. Another approach is to use the requestAnimationFrame method, which allows the browser to optimize animations. You can also improve performance by minimizing the number of DOM operations and using CSS conversions where possible.

Can I use jQuery animate on a set of elements?

Yes, you can use the jQuery animate method on a set of elements. When you call the animate method on a jQuery object with multiple elements, the animation is applied to all elements in the collection.

How to create a fade effect using jQuery animate?

You can create a fade effect using the jQuery animate method by animate the opacity attribute. However, jQuery also provides fadeIn, fadeOut, and fadeToggle methods, which are easier to use if you just want to create simple fade effects.