jQuery Slide Out; Content is Vanishing during sliding

Question

Using a jQuery effect, I have a layer that has a collection of HTML within it (which displays just fine).

When a button is clicked, this slides out

 ($n).show('blind', { direction: left }, 1000);

This effect works fine. It doesn't give me any trouble. But sometimes within the layer, I have other content that has to be aligned properly using floats.

<div class="sliding-panel">
 <div style="float: left">
 This content goes on the left
 </div>
 <div style="float: left">
 This content goes next to the first content!
 </div>
</div>

In HTML, this works fine. And it renders fine on the slide out panel - however DURING the sliding animation, the entire pane is transparent. Then it just 'appears' once the animation is complete.

Any ideas on how I can get rid of this tacky effect? I am trying to avoid redundant show/hide effects if possible, since not every instance of this 'sliding' pane have such requirements. I am hoping there is just a css problem I am missing.

Answer 1

If you only have floating elements in the container you are trying to animate this will happen. You need to add some kind clearfix to the container.

Here's one option that you can play around with.

Answer 2

Add

.sliding-panel {
  overflow: hidden;
  zoom: 1;
}

into your stylesheet