jQuery Fade


Some of the following fading methods are used in jQuery Fading Effects jQuery

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() Method

This method is used to fade in a hidden element.

Syntax

$(selector).fadeIn(speed,callback);

Parameters

The two parameters speed and callback are optional.

speed - This parameter is used to set the speed of hiding or showing. Its value can be "slow", "fast" or milliseconds.

callback - Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeIn(3000);
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

 

jQuery fadeOut() Method

This method is used to fade out a visible element.

Syntax

$(selector).fadeOut(speed,callback);

Parameters

The two parameters speed and callback are optional.

speed - This parameter is used to set the speed of hiding or showing. Its value can be "slow", "fast" or milliseconds.

callback - Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeOut(3000);
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery fadeToggle() Method

This method is used to toggles between the fadeIn() and fadeOut() methods.

Syntax

$(selector).fadeToggle(speed,callback);

Parameters

The two parameters speed and callback are optional.

speed - This parameter is used to set the speed of hiding or showing. Its value can be "slow", "fast" or milliseconds.

callback - Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeToggle(3000);
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>

jQuery fadeTo() Method

This method allows fading to a given opacity (value between 0 and 1).

Syntax

Parameters

$(selector).fadeTo(speed,opacity,callback);

The three parameters speed, opacity, and callback are optional.

Parameters

speed - This parameter is used to set the speed of hiding or showing. Its value can be "slow", "fast" or milliseconds.

opacity - Required. Specifies fading to a given opacity (value between 0 and 1).

callback - Its value specifies the name of a function that will be executed when hide/show is completed.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeTo(3000, 1);
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>