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

Add

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

into your stylesheet