jQuery Chaining Effect (Functions Explained With Example)

You can chain actions/methods together with jQuery.

Chaining allows us to use a single statement to execute many jQuery methods (on the same element).

We've been writing jQuery statements (one after the other).

There is, however, a method known as chaining that allows us to run multiple jQuery commands. So, for example, you can run the order on the same element after the other (s).

Tip: Browsers will not have to look for the same element(s) twice this way.

Add it to the end of the preceding one to chain an action.

The CSS(), slideUp(), and slideDown() methods are combined in the following example. The "p1" element turns red initially, then moves up and down:

Example 

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

If more method calls were required, we could have done so.

Tip: When chaining lines of code, the line of code can get rather long. On the other hand, jQuery is not particularly rigid about syntax; you can format it as you like, including line breaks and indentations.

Example

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

Extra whitespace is removed by jQuery, and the lines above are executed as a single long line of code.