How do I slideDown whilst maintaining transparency in jQuery?

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

How about:

$('#hiddenElement').css("opacity", 0).slideDown().animate({opacity:1})

Answer 2

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>

Answer 3

Your description sounds like a variation of this problem, which I had to deal with the other day.

It only happens in IE, and only if you are rendering in quirks mode. So the easy solution, is to switch to standards mode. You can find a table of doctypes here that makes IE render in standards mode.

But if you are in the same situation as me where thats not an options, then you can apply a patch to you jQuery library, which you can find here.