.fadeOut() - Hide using fading effect in jQuery

How to hide an html element using fading effect in jQuery?

To hide a displaying html element, fadeout() method can be used. This makes the element transparent.

<input type="button" id="btnFadeout" value="Fadeout" />
<div id="divFadeIn" style="height: 50px; width: 50px; background: red; left: 0px; position: absolute;"> </div>

<script>
$("#btnFadeout").click(function () {
     $("#divFadeIn").fadeOut('slow');
});
</script>

In the above code when “btnFadeout” will be clicked, the “divFadeIn” will become hidden by fading effect.

Note

Like .slideDown() method, we can specify 2^nd parameter in this function that executes when fadeOut effect is complete.

Views: 6687 | Post Order: 100