Tuesday 27 August 2013

CSS only rendering after jQuery animation completes. How to fix that?

CSS only rendering after jQuery animation completes. How to fix that?

I have a hidden element which I am sliding down using simple .slideDown()
function. This element has another element inside, but that does not show
up until the sliding down is complete.
Here is a fiddle with a demo. Code are pretty straight forward
$("a").on("click", function() {
$("#test").slideDown(1000);
});
And
<div id="test">
<div class="hiddenbar">
</div>
Long Para
</div>
<a>Click Here</a>
The .hiddenbar shows up after slideDown completes. Any way to overcome this?

No comments:

Post a Comment