jQuery Slide Out; Le contenu disparaît pendant le glissement

Question

En utilisant un effet jQuery, j'ai une couche qui contient une collection de HTML (qui s'affiche très bien).

Lorsqu'un bouton est cliqué, cette coulisse

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

Cet effet fonctionne très bien. Cela ne me pose aucun problème. Mais parfois, dans la couche, j'ai d'autres contenus qui doivent être alignés correctement en utilisant des flottants.

<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> 

En HTML, cela fonctionne très bien. Et cela rend bien sur le panneau coulissant - cependant pendant l'animation coulissante, le volet entier est transparent. Ensuite, il apparaît juste une fois l'animation terminée.

Des idées sur comment je peux me débarrasser de cet effet collant? J'essaie d'éviter les effets show/hide redondants si possible, car toutes les instances de ce volet 'glissant' n'ont pas ces exigences. J'espère qu'il y a juste un problème de css qui me manque.

Answer 1

Ajouter

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

dans votre feuille de style

Answer 2

Si vous n'avez que des éléments flottants dans le conteneur que vous essayez d'animer, cela se produira. Vous devez ajouter une sorte de clearfix au conteneur. Il s'agit d'un option avec lequel vous pouvez jouer.