Is there anything else we can do with .hide()?

Frequently Asked Questions jQuery FAQ
1

Question

Is there anything else we can do with .hide()?

Answer

Yes, .hide() can actually take some arguments. Let’s remember that it is part of the effects methods, so most of them can at least have their duration altered.

Back to .hide(), it has four different setups, the most use which involves not passing any arguments, the second which requests two arguments, a number in milliseconds for the duration of the effect and a function that will run once the hiding animation is complete. for example, I have this HTML:

<div>
  <h1 class='head'> Here is  a header</h1>
  <p class='text'> and I have some text</p>
  <button class='btn'> hide the header </button>
</div>

and decided to slowly hide the header, then change the paragraph once the animation is finished:

$(document).ready(() => {
  $('.btn').click(()=>{
    $('.head').hide(2000, ()=>{ /*as we can see hide has now two arguments*/
      $('.text').html('Now I\'ve changed!')
    })
  })
})

It will be seen like so:
09%20PM

and once the two seconds pass, it will now display:

27%20PM

.hide() can also take three parameters: duration, easing which dictates how the transition transforms, it is between linear or swing which is the default,

Its last setup is taking an options object as an argument, all keys are optional, but here are some of them:

{
  duration: number,
  easing: string, //'linear' or 'swing'
  queue: boolean, 
/* it lets jquery know if it should go in an animation queue if you have other elements that are animated and you will like them to run in a certain order if they are all clicked*/
  progress: () => {/*a function to be called at every step of the animation*/ },
  complete: () => {...},
  start: () => {/* function to be called before the animation starts */},
  done: () => {/* it is called once the animation is complete, almost like complete*/},
  fail: () => {/* called when the animation is unsuccessful or cannot be performed*/},
  always: () => {/* called at the end no matter if the animation was successful or if it failed*/}
}
7 Likes