.fadeOut() Effect in Jquery

Description:

The fadeOut( ) method fades out all selected/matched elements by applying the opacity to 0, then setting display to “none” . Finally the optional callback will be triggered after completion of animation.

Syntax

.fadeOut(

[duration ] [easing] [callback] )

Ex : $(“#div”).fadeOut(“slow”);

Duration/speed	It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400)
Easing	It specifies the easing function to be used for transition (default value: swing).
Callback	A function to call once the animation is complete.

Example: Without Option(parameter)

From the below code, the “divFadeBox” been visible on the initial load. After clicking “divButton” the click event been triggered and the fadeOut() will be executed on the “divFadeBox”. Finally “display:none” will be set to the matched element.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$("#divButton").click(function () {
$("#divFadeBox").fadeOut();
});
});

</script>
</head>
<body>
</br>
<button id="divButton">Click to fade in boxes</button><br><br>
<div id="divFadeBox" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

<html>

<head>

$(document).ready(function () {

$("#divButton").click(function () {

$("#divFadeBox").fadeOut();

});

</script>

</head>

<body>

</br>

<button id="divButton">Click to fade in boxes</button><br><br>

</body>

</html>

Output:

After clicking the “Click to fade Out boxes” button, then the blue box will be disappear as shown below.

<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue;"></div>

1	<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue;"></div>

dotnet-helpers-jquery-effects-fade-out-output-jqueryhelpers-1

<div id="divFadeBox" style="width: 80px; height: 80px; display: none; background-color: blue;"></div>

1	<div id="divFadeBox" style="width: 80px; height: 80px; display: none; background-color: blue;"></div>

dotnet-helpers-jquery-effects-fade-out-output-jqueryhelpers

One Comment

dolcemodz.com June 17, 2017 at 4:38 pm

The Js Helper supports the JavaScript libraries Prototype, jQuery and Mootools and provides methods for manipulating javascript.

.fadeOut() Effect in Jquery