fadeTo() method in jQuery

fadeTo() in jQuery

The fadeTo() method is used to animate the opacity of the matched elements.

It is similar to the fadeIn() method, but that method is used to make the element visible and always fades to 100% opacity.

Durations are given in milliseconds, higher values indicate slower animations.

This method just changes the opacity CSS property, so fadeTo( 0, opacity) is the same as css( "opacity", opacity ).

By setting jQuery.fx.off = true all jQuery effects can be turned off globally , which in turn sets the duration to 0.

Syntax

$(selector).fadeTo(duration, opacity[, easing][, complete])

  • duration
    • Default value is 400.
    • number - Integer values are given in milliseconds.
    • slow - It denotes 600 milliseconds.
    • fast - It denotes 200 milliseconds.
  • opacity - It is used to indicate the target opacity, its value is from 0 to 1.
  • easing - It is optional, it is used to specify the speed at which the animation progresses. It can have two values.
    • swing - It is the default value, animation progresses in an irregular way.
    • linear - It specifies the animation to progresses at a constant pace.
  • complete - It indicates a function, and it will be executed after the elements animation is completed.

Example 1 - Fadeto 0.1 opacity within 100ms

Try Yourself

Example 2 - fadeTo() with complete function

Try Yourself

Example 3 - calling complete function using function name

Try Yourself

Example 4 - fadeTo() using easing(linear) value

Try Yourself