In this blog, we will learn about jquery fading effects. With the use of jquery fade method we can fade in and out of an element of visibility. Follow the different types of jquery fade methods.
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
Jquery fadeIn() method:
The fadeIn() method is used to fade in a given element.
Syntax:
$(selector).fadein();
$(selector).fadeIn(speed, callback);
$(selector).fadeIn(speed, easing, callback); Speed
The speed parameter specifies the speed of the delay or duration of fading effect. It is the optional parameter and it can take the values such as slow, fast and milliseconds.
Callback
The callback parameter specifies the function to be called after completion of fadein() effect. It is the optional parameter.
Easing
This parameter specifies the easing function to be used for transition.
Example:
Follow the below example to learn the fadeIn() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery fadeIn() method</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function(){
$("button").click(function(){
$("#color1").fadeIn();
$("#color2").fadeIn("slow");
$("#color3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Jquery fadeIn() method example with different parameters.</p>
<button>Click to fade in boxes</button><br><br>
<div id="color1" style="display:none;background-color:#40ff00;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div><br>
<div id="color2" style="display:none;background-color:#ff0000;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div><br>
<div id="color3" style="display:none;background-color:#0000ff;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</body>
</html> Jquery fadeOut() method:
The fadeOut() method is used to fade out a visible element.
Syntax:
$(selector).fadeOut();
$(selector).fadeOut(speed,callback);
$(selector).fadeOut(speed, easing, callback); Speed
The speed parameter specifies the speed of the delay or duration of fading effect. It is the optional parameter and it can take the values such as slow, fast and milliseconds.
Callback
The callback parameter specifies the function to be called after completion of fadeOut() effect. It is the optional parameter.
Easing
This parameter specifies the easing function to be used for transition.
Example:
Follow the below example to learn the fadeOut() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery fadeOut() method</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function(){
$("button").click(function(){
$("#color1").fadeOut();
$("#color2").fadeOut("slow");
$("#color3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>Jquery fadeOut() method example with different parameters.</p>
<button>Click to fade out boxes</button><br><br>
<div id="color1" style="background-color:#40ff00;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div><br>
<div id="color2" style="background-color:#ff0000;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div><br>
<div id="color3" style="background-color:#0000ff;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</body>
</html> Jquery fadeToggle() method:
The fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded in, it will change them to faded out and if they are faded out it will change them to faded in.
Syntax:
$(selector).fadeToggle();
$(selector).fadeToggle(speed, callback);
$(selector).fadeToggle(speed, easing, callback); Speed
The speed parameter specifies the speed of the delay or duration of fading effect. It is the optional parameter and it can take the values such as slow, fast and milliseconds.
Callback
The callback parameter specifies the function to be called after completion of fadeToggle() effect. It is the optional parameter.
Easing
This parameter specifies the easing function to be used for transition.
Example:
Follow the below example to learn the fadeToggle() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery fadeToggle() method</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function(){
$("button").click(function(){
$("#color1").fadeToggle();
$("#color2").fadeToggle("slow");
$("#color3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Jquery fadeToggle() method example with different parameters.</p>
<button>Click to fade Toggle boxes</button><br><br>
<div id="color1" style="background-color:#40ff00;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div><br>
<div id="color2" style="background-color:#ff0000;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div><br>
<div id="color3" style="background-color:#0000ff;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</body>
</html> Jquery fadeTo() method:
The fadeTo() method is used to fade the element to a given opacity.
Syntax:
$(selector).fadeTo(speed, opacity);
$(selector).fadeTo(speed, opacity, callback);
$(selector).fadeTo(speed, opacity, easing, callback); Speed
The speed parameter specifies the speed of the delay or duration of fading effect. It is the optional parameter and it can take the values such as slow, fast and milliseconds.
Callback
The callback parameter specifies the function to be called after completion of fadeTo() effect. It is the optional parameter.
Easing
This parameter specifies the easing function to be used for transition.
Opacity
This parameter specifies the opacity. The opacity value ranges between 0 and 1.
Example:
Follow the below example to learn the fadeTo() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery fadeTo() method</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function(){
$("button").click(function(){
$("#color1").fadeTo("slow", 0.2);
$("#color2").fadeTo("slow", 0.5);
$("#color3").fadeTo("slow", 0.9);
});
});
</script>
</head>
<body>
<p>Jquery fadeTo() method example with different parameters.</p>
<button>Click to fade boxes</button><br><br>
<div id="color1" style="background-color:#40ff00;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div><br>
<div id="color2" style="background-color:#ff0000;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div><br>
<div id="color3" style="background-color:#0000ff;padding: 30px;width:500px;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</body>
</html> Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example