Javascript Ajax jQuery Html PHP Example Quiz New MORE

jQuery fading methods

❮ Previous Next ❯

In jQuery fadeToggle() method is used to toggle between fadeIn() and fadeOut() effects. If the selected elements are faded out, the fadeToggle method will fade in them, if they are faded in, then it will make them fade out.It is a predefined function of jQuery.

jQuery fadeToggle() Syntax

$(selector).mouseover(function)$(selector).fadeToggle(speed, callback_function);

The speed parameter is required and used to specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

jQuery fadeTo() Method

The fadeTo() method is used to add a opacity to an HTML element.

$(selector).mouseover(function)$(selector).fadeTo(speed, opacity, easing, call_function)

Here selector is the selected element.

    Parameter: It accepts four parameters which are specified below-
  • speed: It specifies the speed of the fading effect.
  • opacity: It specifies to fade and this value should must be in between 0.0 and 1.0.
  • easing: It specifies the speed at different point of animation.
  • call_function: It is optional parameter and perform a function after performing fadeTo method.

The speed parameter is required and used to specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

Example:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>Toggle boxes</title>  
  <style>  
	h2 {  
		color: white;  
		text-align:center;
		padding-top:40px;
	}  
  </style>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>  
<body>
<button id="out">fade toggle boxes</button>
<br>
<br>
<div id="div" style="width:400;height:100px;background-color:green;"><h2 style="color:white;text-align:center;padding-top:40px;">STUDENTS TUTORIAl</h2></div>
<script>
$(document).ready(function(){
  $("button").click(function(){
	$("#div").fadeToggle("slow");//The required speed parameter values: "slow", "fast", or milliseconds.
  });
});
</script> 
</body>  
</html>
Run it Yourself »
❮ Previous Next ❯