CODEWITHSUNDEEP
javascriptjqueryanimation
Brendan
Brendan

Reputation: 19363

How do I slideDown whilst maintaining transparency in jQuery?

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?

Upvotes: 2

Views: 3240

Answers (4)

Aaron Hoffman
Aaron Hoffman

Reputation: 6962

I needed to add a li to a ul and wanted it to slideDown first, then fadeIn.

The below worked for me. I had to first .hide() the content, then set opacity to 0, then append the content, then slideDown(), then animate the opacity back to 1.

In the below code, "content" is the li, #ListItems is the ul

$(content).hide().css("opacity", 0).appendTo("#ListItems").slideDown(500, function () { $(this).animate({ "opacity": 1 }, { queue: false, duration: 500 }); });

Upvotes: 0

Tom Jelen
Tom Jelen

Reputation: 2579

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.

Upvotes: 0

Owen
Owen

Reputation: 84513

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>

Upvotes: 2

orip
orip

Reputation: 75467

How about:

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

Upvotes: 0

Related Questions