Jquery fade effects – Tutorial

Hey guys, welcome again to wearewriter.com.

Today I am going to discuss with you the JQUERY FADE EFFECTS. In previous articles we have discussed about the jquery hide & show effects. you can read out.

Here we will learn about jquery effects by me jquery tutorial and you can also visit the official website of jquery.com.

Jquery fadeIn() effect

jQuery fadeIn() method is used to fade in the element, that means when you click on the button then open the all the div box. It can take the following values: “slow”, “fast”, or milliseconds.

SYNTAX

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

Speed: It is an optional parameter. It specifies the speed of the delay.

EASING: It specifies the easing function to be used for transition.

Callback: It is also an optional parameter.

Let’s take an example OF jQuery fadeIn() effect.

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeIn();  
        $("#div2").fadeIn("slow");  
        $("#div3").fadeIn(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeIn() method example with different parameters.</p>  
<button>Click to fade in boxes</button>
<br>
<br>  
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;">
</div>  
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;">
</div>  
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;">
</div>  
</body>  
</html>

OUTPUT

Jquery fadeout() effect-

jquery fadeout effect means click on the button so all the open div are close with which time or which method you apply like(fast or slow) here below example you apply slow method with time in 3000.

Above we discuss the syntax and its parameters so here i show you the example of FADEOUT Effects

Example

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeOut();  
        $("#div2").fadeOut("slow");  
        $("#div3").fadeOut(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeOut() method example with different parameters.</p>  
<button>Click to fade out boxes</button><br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>   

 

OUTPUT

Jquery fade Toggle() Effect

jquery fadeToggle() Effect it’s a combination of fadeIn() and fadeout() effects which means If the elements are faded in, it will make them faded out and if they are faded out it will make them faded in.

and above you can see the syntax all the method like speed,callback,easing

EXAMPLE

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeToggle();  
        $("#div2").fadeToggle("slow");  
        $("#div3").fadeToggle(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeToggle() method example with different parameters.</p>  
<button>Click to fade Toggle boxes</button><br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>   

OUTPUT-this is fadeout () when you click on the button it will show fadein()

this is when you click the button show the fadein () effect

Jquery fadeTo() Effect

jQuery fadeTo() method is used to fading to a given opacity.

SYNTAX

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

Here i discuss about opacity because above we discuss all the attribute like speed,callback and easing

opacity:It specifies the opacity. The opacity value ranges between 0 and 1.

EXAMPLE-

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeTo("slow", 0.3);  
        $("#div2").fadeTo("slow", 0.4);  
        $("#div3").fadeTo("slow", 0.5);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeTo() method example with different parameters.</p>  
<button>Click to fade boxes</button><br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>

fadeTo(“slow”, 0.3); HERE 0.3 represent the opacity in fadeTo() effect. YOU can easily set the opacity between 0 to 1.

when you click on the button all the div boxes will be close with the opacity which will you set

OUTPUT-

Thanks for reading my article I hope it will be help full to you.

if you like my article so share with your friends, also please comment your queries.

Leave a Comment

Show Buttons
Hide Buttons