jQuery: fadeIn(), and fadeOut()

There are two primary fading commands in jQuery: fadeIn(), and fadeOut(). When jQuery fades an element out or in, it basically reduces the opacity of the element to nothing when fading out, and then hides it all together so other elements can reposition themselves. Likewise, fading an element in brings it back into position and then fades it to full opacity.

HTML Code

<div id="fadeMe">
    This content will appear and disappear when the div is faded in and out.
</div>
<!-- One button for each fading command -->
<input id="btnFadeOut" value="Fade Out" type="button">
<input id="btnFadeIn" value="Fade In" type="button">
                 
 

JavaScript Code

$('#btnFadeIn').click(function() {
    $('#fadeMe').fadeIn('slow');
});
$('#btnFadeOut').click(function() {
    $('#fadeMe').fadeOut();
});
                 
To View DEMO 

-banu-