fadeToggle() method in jQuery

fadeToggle() in jQuery

fadeToggle() method is used to toggle between fadeIn() and fadeOut() method.

When using this method, specified elements can be made hidden, similarly the hidden element will be made visible.

Parameters may or may not be used in fadeToggle() method.

When using this method, elements will be toggled between both showing and hiding with animation.

Syntax 1

$(selector).fadeToggle([duration][,easing][,complete])

  • duration
    • Default value is 400.
    • number - Integer values are given in milliseconds.
    • slow - It specifies 600 milliseconds.
    • fast - It specifies 200 milliseconds.
  • easing - It is optional, it specifies speed at which the animation progresses.It can have two values.
    • swing - It is a default value, animation progresses irregular way.
    • linear - it specifies animation progresses at a constant pace.
  • complete - It indicate a function, and it will be executed after the element animation complete.
Syntax 2

$(selector).fadeToggle(options)

  • options - Options given below are optional
    • duration - It is used to determine how long the animation will run. It can be defined by string or number.
    • easing - It is used to determine for transition which easing function to be used. It is defined by string.
    • queue - It is denoted by Boolean, whether to place the animation in the effects queue. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it. If it is specified as false, the animation will begin immediately.
    • specialEasing - It is an object which contains one or more of the CSS properties. These properties are defined by arguments and its corresponding easing functions.
    • step - It is used to denote a function for each element when calling animated property.
    • progress - It is used to denote a function to be called after each step of the animation.
    • complete - It is used to denote a function, which is called after the animation on an element is complete.
    • start - It is used to denote a function, when the elements animation begins.
    • done - It is used to denote a function, when the animation on an element completes.
    • fail - It is used to denote a function, when the animation of an element fails to complete.
    • always - It is used to denote a function, when the animation on an element completes or stops without completing.

Example 1 - Making specific element fading in or fading out

Try Yourself

Example 2 - Making element fading in or fading out within specified milliseconds

Try Yourself

Example 3 - fadeToggle() with complete function

Try Yourself

Example 4 - calling complete function using function name

Try Yourself

Example 5 - Making element fading in or fading out using easing(linear) value

Try Yourself

Example 6 - fadeToggle() with options

Try Yourself

Example 7 - fadeToggle() with options and progress bar

Try Yourself