jQuery Effects Using Fade Methods

The common design is:

Our UI design is ready so now to implement the fade methods. There are four types of jQuery Fade methods:

1. fadeIn()

2. fadeOut()

3. fadeToggle()

4. fadeTo()

Let's see one by one

1. fadeIn() Method

The jQuery fadeIn() method displays a hidden element by fading it in.

<script type="text/javascript">
$(document).ready(function ()
{
$("#btnEffect").click(function ()
{
$("#panelPersonalInfo").fadeIn();
$("#panelAddressInfo").fadeIn("slow");
$("#panelLoginInfo").fadeIn(4000); //millisecond
return false;
});
});
</script>

2. fadeOut() Method

The jQuery fadeOut() method fades out a visible element and hides it.

<script type="text/javascript">
$(document).ready(function ()
{
$("#btnEffect").click(function ()
{
$("#panelPersonalInfo").fadeOut();
$("#panelAddressInfo").fadeOut("slow");
$("#panelLoginInfo").fadeOut(4000); //millisecond
return false;
});
});
</script>

3. fadeToggle() Method

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the page's elements are faded out then fadeToggle() will fade them in and if the elements are faded in then fadeToggle() will fade them out.

<script type="text/javascript">
$(document).ready(function ()
{
$("#btnEffect").click(function ()
{
$("#panelPersonalInfo").fadeToggle();
$("#panelAddressInfo").fadeToggle("slow");
$("#panelLoginInfo").fadeToggle(4000); //millisecond
return false;
});
});
</script>

4. fadeTo() Method

The jQuery fadeTo() method allows fading with an opacity value. This value range is 0 to 1. It can show and hide using the opacity value. The opacity value 0 means hide content of the block but leave it on the place on the page and 1 means display without any fade.

<script type="text/javascript">
$(document).ready(function ()
{
$("#btnEffect").click(function ()
{
$("#panelPersonalInfo").fadeTo("fast",.25);
$("#panelAddressInfo").fadeTo("slow",.5);
$("#panelLoginInfo").fadeTo(4000,.8); //millisecond
return false;
});
});
</script>

Conclusion

This article explains four fade method on button click. You can download all four method examples from the zip folder (JQueryFeddingEffect.zip) where each method has a separate example. So download it and be familiar with the fade methods in jQuery.

Reference:

W3Schools.com http://www.w3schools.com/jquery/jquery_fade.asp