- 5 years ago
- Zaid Bin Khalid
- 10,775 Views
-
5
In this session, you will learn fade effects jquery, how to fade in and out elements using jQuery, with the help of an example.
jQuery fadeIn( ) and fadeOut( ) methods
To display or hide the HTML element we use jQuery fadeIn ( ) and fadeOut ( ) method. This method enables you to add animation to your HTML page and makes it more presentable.
This method can increase or decrease the blurriness gradually. It help you to handle the animation. As shown in the example.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>
You can specify the time period or speed timeline for the fadeIn( ) and fadeOut( ) method.
Similar to other jQuery effects methods, this method will help you to control how long the fading animation will run.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>
Callback function can be also specified after the execute the fadeIn ( ) or fadeout ( ) method completes. You will learn more about callback function in the next chapters.
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>
jQuery fadeTogle( ) Method
jQuery fadeToggle( ) method is used to display or hide the selected elements of animation.
The fadeToggle( ) method work as if the selected element is displayed, it will be fade out. Else if the element is hidden, it will be fade in.
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>
You can also control the duration for the fadeToggle( ) method.
The fadeIn( ) and fadeOut( ) method can control the speed of the fade toggle animation.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>
Callback function also be specified for the fadeToggle( ) method. Find below the example as a reference.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>
jQuery fadeTo ( ) Method
The jQuery fadeTo( ) method is similar in some option to the .fadeIn( ) method. However, not similar to .fadeIn( ), the fadeTo( ) method will let you fade in the elements based on an opacity level.
As you can see in the below statement. It will perform the similar function of fadeIn() and fadeOut().
$(selector).fadeTo(speed, opacity, callback);
The duration or speed parameter is also required for this method. It helps to specify the duration of the fade to animation.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>
- 5 years ago
- Zaid Bin Khalid
- 10,775 Views
-
5