.fadeIn() JQ Home  <<  Effects  <<  .fadeIn()

Fading in elements.

Description

The .fadeIn() method is used to show the matched set by fading it to opaque.

Syntax

Signature Description
.fadeIn( [duration] [, easing] [, callback] )Fade in the matched set to opaque, optionally providing a duration and/or 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
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.

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

Fade in the matched set to opaque, optionally providing a duration and/or an easing and/or a callback function.

  • When used in its basic form with no parameters or incorrect parameters the .fadeIn() method defaults to fading in the element(s) with a duration of 400 milliseconds which is the default.

In the example below when the first button is pressed we fade in the first image and it defaults to a fade in time of 400 milliseconds.

When the second button is pressed we use 'swing' easing to animate the picture as we fade it in.

When the third button is pressed we use a callback to alert when the image is faded in.

When the fourth button is pressed we use a duration, easing and a callback to fade in 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 a picture of pie 

$(function(){
  $('#btn1').on('click', function() {
    $('#curry1').fadeIn();
  });
  
  $('#btn2').on('click', function() {
    $('#pie1').fadeIn('swing');
  });
  
  $('#btn3').on('click', function() {
    $('#pie2').fadeIn(function() {
      alert('Animation finished.');
    });
  });
  
  $('#btn4').on('click', function() {
    $('.pie3').first().fadeIn('slow', 'swing', function() {
      // using 'callee' so we don't have to name the function
      $(this).next().fadeIn(1200, arguments.callee);
    });
  });
});

Press the buttons below to action the above code:

                    

Related Tutorials

jQuery Intermediate Tutorials - Lesson 7 - Fading & Sliding Effects