.fadeTo() JQ Home  <<  Effects  <<  .fadeTo()

Fading elements to an opacity.

Description

The .fadeTo() method is used to adjust the opacity of the matched set.

Syntax

Signature Description
.fadeTo( duration, opacity [, easing] [, callback] )Adjust the opacity of the matched set, optionally providing an easing and/or a callback function.

Parameters

Parameter Description Type
durationA string or number determining the time the animation will run for.
default: 400
  • Durations are given in milliseconds and the higher the value, the slower the animation.
  • The string 'slow' can be used which equates to 600 milliseconds.
  • The string 'fast' can be used which equates to 200 milliseconds.
String or
Number
opacityA number between 0 and 1 denoting the target opacity.Number
easingSpecify the speed at which the animation progresses at different points within the animation.
default: swing
  • The string 'swing' which is the default and causes the animation to animate faster at the beginning/end and slower in the middle.
  • The string 'linear' which causes the animation to progress at a constant pace.
String
callbackA function that fires once the animation is complete.
  • The callback is fired in the context of the current element in the set being animated, so the keyword this refers to that element.
  • The callback is fired once for each element in the matched set and can be used to string different animations together in sequence.
 Function

Return

A jQuery object.

.fadeTo( duration, opacity [, easing] [, callback] ) Example  Effects  <<  Top

Adjust the opacity of the matched set, optionally providing an easing and/or a callback function.

In the example below when the left button is pressed we fade the first image to an opacity of 0.75 with a slow duration.

When the middle button is pressed we use 'swing' easing with an opacity of 0.3 with a fast duration.

When the right button is pressed we use a duration, easing and a callback to fade the last 3 images to their specified values.

a picture of curry a picture of pie a picture of pie a picture of pie a picture of pie 

$(function(){
  $('#btn13').on('click', function() {
    $('#curry4').fadeTo('slow', 0.75);
  });
 
  $('#btn14').on('click', function() {
    $('#pie10').fadeTo('fast', 0.3, 'swing');
  });
  
  $('#btn15').on('click', function() {
    $('.pie11').first().fadeTo('fast', 0.8, 'linear', function() {
      // using 'callee' so we don't have to name the function
      $(this).next().fadeTo(1200,  0.4, arguments.callee);
    });
  });
});

Press the buttons below to action the above code:

        

Related Tutorials

jQuery Intermediate Tutorials - Lesson 7 - Fading & Sliding Effects