How to fade an element with CSS and jQuery

You can hide and show DOM elements in CSS as well as jQuery. But you can also combine the effects and create very elegant presentations with ease.

Let’s consider my own ID named #myown. Once styled to look ravishing, I’ll set it to disappear via this bit of CSS:

#myown {
    /* my styles go here */
    display: none;
}

My element won’t show up when the page loads – but I can make it fade in like in the movies with this bit of jQuery:

jQuery('#myown').fadeIn('slow', function () {
	// could add something here upon completion	
});

Here I’ll grab a reference to #myown and then use .fadeIn to make my element visible.

We can chain other methods in the same call too. In this example I’ll do the same thing, but wait for one second until the fade in begins:

jQuery('#myown').delay(1000).fadeIn('slow', function () {
	// could add something here upon completion	
});