Question

I’m trying to animate a block level element using jQuery. The page loads with the element styled with display: none. Id like it to slideDown whilst transparent and then fadeIn the content using the callback, however slideDown appears to set the visibility to full before fadeIn is called, resulting in the content being visible during the slideDown animation.

Does anyone know of a way to accomplish this?

Answer 1

a few probable issues with your code: are you setting the content to hide as well in the beginning? are you calling fadeIn during the slideDown callback?

here’s some example HTML/code that will fadeIn after the slideDown

$('div').hide(); // make sure you hide both container/content  $('#container').slideDown('slow', function() {     $('#content').fadeIn('slow');    // fade in of content happens after slidedown }); 

html:

<div id='container'>     <div id='content'>stuff</div> </div>