Are JQuery effect methods able to be chained on the same element?

Question

Are JQuery effect methods able to be chained on the same element?

Answer

Yes, they are. If you needed to perform multiple of these methods on one element you can chain them, they will be triggered in the same order as they have been written. For example: if I wanted to perform a show hide and fade in and out on my header because I wanted to:
43%20PM

I could write something like this with a chain of multiple methods:

$(document).ready(() => {
  
   $('.btn').on('click', ()=>{
    $('.head').hide(2000, ()=>{
      
       $('.text').html('Now I\'ve changed!')
     }).show(4000).fadeOut(2000).fadeIn(2000, ()=>{
      $('.text').html('final change')
    })
  })
})

this way, once I click my ‘hide the header’ button, is not just going to hide it and change the text to Now I've changed! in 2000 milliseconds but it will also show the header again, fade it out and fade it back in, changing the text of the element with .text class to final change once it is done.

As a matter of fact, one great thing about JQuery is that most of their methods are able to be easily chained onto each other, and it keeps a queue where each action to be performed will be tracked and executed in order (as JavaScript commonly does), with the addition of having three methods that JQuery provides us to manipulate that execution queue: queue(), dequeue(), and clearQueue().

To keep on learning more about JQuery and how it interacts with events, we can check this lesson.

4 Likes