jQuery > Effects methods

.fadeIn() - Show suing fading effect in jQuery

How to display an element using fading effect in jQuery?


To display a hidden html element using fade in effect, fadeIn() method can be used.

<input type="button" id="btnFadeIn" value="Fade In" />
<div id="divFadeIn" style="height: 50px; width: 50px; background: red; left: 0px; display: none; position: absolute;"> </div>
<script> $("#btnFadeIn").click(function () { $("#divFadeIn").fadeIn('slow'); });
</script>

In the above code when button “btnFadeIn” is clicked, the “divFadeIn” will be displayed with fading effect.

Note

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

 Views: 877 | Post Order: 99



Write for us