jQuery > Effects methods

.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 2nd parameter in this function that executes when fadeOut effect is complete.

 Views: 728 | Post Order: 100



Write for us