Hello Readers,

jQuery provides a simple way to apply wonderful effects in your application. jQuery effects methods are very amazing and easy to implement with minimum configuration. So in today's post, we will discuss the jQuery effects methods.

Let's have a look on these methods and their examples:

• hide() and show():  hide() method is used to hide any HTML element and show() method is used to show any HTML element.

For Example:

<p>hide me :)</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

$(document).ready(function(){
    $("#hide").click(function(){ // Hiding the HTML element
        $("p").hide();
    });
    $("#show").click(function(){ // Showing the HTML element
        $("p").html('I am back');
        $("p").show();
        
    });
});

In the above example, we are simply hiding and showing an HTML element. Both the methods have two optional parameters. First one is speed so that you can specify the speed of hiding and showing of HTML element and the second one is callback parameter which is a function. Speed can be specified with these value:  It can be "fast", "slow", or in milliseconds.

Note: This callback method will execute after the hide() and show() method completes.

For Example:

$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide(1000, function(){//Hiding with speed 1000 ms and callback function
           alert("Hiding complete");
        });
    });
    $("#show").click(function(){
        $("p").html('I am back');
        $("p").show(500, function(){//Showing with speed 500 ms and callback function
           alert("Showing complete");
        });        
    });
});

• toggle(): We can use toggle() method on place of hide() and show() method.

For Example:

<p> Hide or show me :) </p>
<button>Toggle</button>

$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle(); // Hiding or showing HTML element.
    });
});

This method has two optional parameters. First one is speed so that you can specify the speed of hiding or showing of HTML element and the second one is callback parameter which is a function. Speed can be specified with these value:  It can be "fast", "slow", or in milliseconds.

Note: This callback method will execute after the toggle() method completes.

For Example:

$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle(1000); // Hiding or showing HTML element.
    });
});

• fadeIn(): This method works on hidden HTML element.

For Example:

<button>Fade in</button>
<div style="width:80px;height:80px;display:none;background-color:red;"></div>

$(document).ready(function(){
    $("button").click(function(){
        $("div").fadeIn();
    });
});

This method has two optional parameters. First one is speed so that you can specify the speed of fade in effect of HTML element and the second one is callback parameter which is a function. Speed can be specify with following value:  It can be "fast", "slow", or in milliseconds.

Note: This callback method will execute after the fadeIn() method completes.

For Example:

$(document).ready(function(){
    $("button").click(function(){
        $("div").fadeIn(1000); // fade in div in 1000 ms.
    });
});

• fadeOut(): This method works on visible elements.

For example:

<button>Fade out</button>
<div style="width:80px;height:80px;background-color:red;"></div>

$(document).ready(function(){
    $("button").click(function(){
        $("div").fadeOut();
    });
});

This method has two optional parameters. First one is speed so that you can specify the speed of fade out effect of HTML element and the second one is callback parameter which is a function. Speed can be specify with following value:  It can be "fast", "slow", or in milliseconds.

Note: This callback method will execute after the fadeOut() method completes.

For Example:

$(document).ready(function(){
    $("button").click(function(){
        $("div").fadeOut(1000);
    });
});

• fadeToggle(): This method works like fadeIn() and fadeOut() method. fadeToggle() method works in place of fadeIn() and fadeOut() methods. This method has two optional parameters. First one is speed so that you can specify the speed of fade toogle effect of HTML element and the second one is callback parameter which is a function. Speed can be specify with following value:  It can be "fast", "slow", or in milliseconds.

Note: This callback method will execute after the fadeToggle() method completes.

For Example:

<button>fade in/out</button>
<div style="width:80px;height:80px;background-color:red;"></div>

$(document).ready(function(){
    $("button").click(function(){
        $("div").fadeToggle(1000);
    });
});

• fadeTo(): This method used to fade an element to a given opacity. This method required two parameter speed and opacity. Speed can be specify with following value:  It can be "fast", "slow", or in milliseconds and opacity value will be between 0 and 1. Callback function is optional parameter and executes when fadeTo() method completes.

For Example:

<button>fadeTo</button>
<div style="width:80px;height:80px;background-color:red;"></div>

$(document).ready(function(){
    $("button").click(function(){
        $("div").fadeTo("slow", 0.15); // fadeTo() methos with slow speen and 0.15 opacity.
    });
});

These are the amazing effects with simple configuration to make your application more attractive.Hope this will help you. :)