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

Views: 9506 | Post Order: 99