jQuery Effect Fade - CodingTuting:codingtuting

jQuery Effect - Fade

jQuery Effect jQuery Tutorial CodigTuting

The jQuery "Fade" Effect is used to appear and disappear the visibility. It applies the opacity on the element.

jQuery has 4 types of Fade Effect:-

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

1) jQuery fadeIn()

The jQuery fadeIn() method is use to appear (fade) in the hidden content.

Syntax:

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

fadeIn() methods has two optional parameters.

1. The parameter "speed" is used to change the default speed of Show (Fade). The default is 400. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.

2. The parameter "callback" is a function, which executes after the fadeIn() method completed. We'll learn about callback in the upcoming chapter.

Example:

This will appear the color strips after a click on the button.

    
    <button class="fadeIn-btn"> FadeIn </button>


    <div id="fadeIn-strip1" style="width:300px;height:20px;display:none;background-color:red;"></div> <br/>
    <div id="fadeIn-strip2" style="width:300px;height:20px;display:none;background-color:green;"></div> <br/>
    <div id="fadeIn-strip3" style="width:300px;height:20px;display:none;background-color:blue;"></div> <br/>
    <div id="fadeIn-strip4" style="width:300px;height:20px;display:none;background-color:yellow;"></div>

$(document).ready(function(){
    $(".fadeIn-btn").click(function(){
        $("#fadeIn-strip1").fadeIn(); // default speed 400
        $("#fadeIn-strip2").fadeIn("fast");
        $("#fadeIn-strip3").fadeIn("slow");
        $("#fadeIn-strip4").fadeIn(3000);
    });
 });

Output:

2) jQuery fadeOut()

The jQuery fadeOut() method is use to disappear (display none) the visible content.

Syntax:

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

fadeOut() methods has two optional parameters.

1. The parameter "speed" is used to change the default speed of Hiding. The default speed is 400. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.

2. The parameter "callback" is a function, which executes after the fadeOut() method completed. We'll learn about callback in the upcoming chapter.

Example:

This will disappear the color strips after a click on the button.

    
    <button class="fadeOut-btn"> fadeOut </button>


    <div id="fadeOut-strip1" style="width:300px;height:20px;background-color:red;"></div> <br/>
    <div id="fadeOut-strip2" style="width:300px;height:20px;background-color:green;"></div> <br/>
    <div id="fadeOut-strip3" style="width:300px;height:20px;background-color:blue;"></div> <br/>
    <div id="fadeOut-strip4" style="width:300px;height:20px;background-color:yellow;"></div>

$(document).ready(function(){
    $(".fadeOut-btn").click(function(){
        $("#fadeOut-strip1").fadeOut(); // default speed 400
        $("#fadeOut-strip2").fadeOut("fast");
        $("#fadeOut-strip3").fadeOut("slow");
        $("#fadeOut-strip4").fadeOut(3000);
    });
 });

Output:

3) jQuery fadeToggle()

The jQuery fadeToggle() method is use to switching between fadeIn and fadeOut effect. Like switch on-off the bulb. One electricity swtich can switch on and off the bulb.

Syntax:

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

fadeToggle() methods has two optional parameters.

1. The parameter "speed" is used to change the default speed of effect. The default is 400. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.

2. The parameter "callback" is a function, which executes after the fadeToggle() method completed. We'll learn about callback in the upcoming chapter.

Example:

This will switch (show and hide) the color strips after a click on the button.

    
    <button class="fadeToggle-btn"> fadeToggle </button>


    <div id="fadeToggle-strip1" style="width:300px;height:20px;background-color:red;"></div> <br/>
    <div id="fadeToggle-strip2" style="width:300px;height:20px;background-color:green;"></div> <br/>
    <div id="fadeToggle-strip3" style="width:300px;height:20px;background-color:blue;"></div> <br/>
    <div id="fadeToggle-strip4" style="width:300px;height:20px;background-color:yellow;"></div>

$(document).ready(function(){
    $(".fadeToggle-btn").click(function(){
        $("#fadeToggle-strip1").fadeToggle(); // default speed 400
        $("#fadeToggle-strip2").fadeToggle("fast");
        $("#fadeToggle-strip3").fadeToggle("slow");
        $("#fadeToggle-strip4").fadeToggle(3000);
    });
 });

Output:

4) jQuery fadeTo()

The jQuery fadeTo() method is use to apply the animated opacity to the element. The value of opacity is 0 to 1

Syntax:

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

fadeTo() methods has three optional parameters.

1. The parameter "speed" is used to change the default speed of opacity effect. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.

2. The parameter "opacity" is the value of opacity, which should be 0 To 1. Like 0.5, 0.9, 0.75 etc.

3. The parameter "callback" is a function, which executes after the fadeTo() method completed. We'll learn about callback in the upcoming chapter.

Example:

This will apply the opacity to the strips after a click on the button.

    
    <button class="fadeTo-btn"> fadeTo </button>


    <div id="fadeTo-strip1" style="width:300px;height:20px;background-color:red;"></div> <br/>
    <div id="fadeTo-strip2" style="width:300px;height:20px;background-color:green;"></div> <br/>
    <div id="fadeTo-strip3" style="width:300px;height:20px;background-color:blue;"></div> <br/>

$(document).ready(function(){
    $(".fadeTo-btn").click(function(){
        $("#fadeTo-strip1").fadeTo("fast", 0.4);
        $("#fadeTo-strip2").fadeTo("slow", 0.65);
        $("#fadeTo-strip3").fadeTo("slow", 1);
    });
 });

Output:

Thanks for Reading

Author : Jignesh Panchal

Hi, I'm Jignesh Panchal. I'm a Web Developer & Designer. I've started this blog to help the programmers using my experience and skills. You will get solutions and tips about Programming, Web Development etc.

jQuery Effect Fade - CodingTuting