jQuery slideDown + CSS Floats

Question

J'utilise un tableau HTML avec plusieurs lignes. Chaque deuxième ligne - contenant des détails sur la ligne précédente - est cachée en utilisant CSS.

Lorsque vous cliquez sur la première ligne, la deuxième ligne est affichée à l'aide de jQuery show(). C'est plutôt sympa, mais je préférerais le slideDown-Effect. Le problème est, à l'intérieur de la rangée de détails, il y a deux DIVs flottantes, une flottant sur la gauche et une sur la droite. Maintenant, si je fais glisser la rangée précédemment cachée, les DIVs se comportent étrangement et "sautent". Voir ce gif animé pour comprendre ce que je veux dire: http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif

Le balisage:

<tr class="row-vm"> 
    <td>...</td> 
    ... 
</tr> 
<tr class="row-details"> 
    <td colspan="8"> 
     <div class="vmdetail-left"> 
     ... 
     </div> 
     <div class="vmdetail-right"> 
     ... 
     </div> 
    </td> 
</tr> 

Le CSS:

.table-vmlist tr.row-details { display: none; } 
div.vmdetail-left { float: left; width: 50%; } 
div.vmdetail-right { float: right; width: 50%; } 

Et le code jQuery:

if ($(this).next().css('display') == 'none') 
{ 
    // Show details 
    //$(this).next().show(); 
    $(this).next().slideDown(); 
} 
else 
{ 
    // Hide details 
    //$(this).next().hide(); 
    $(this).next().slideUp(); 
} 

Y at-il un moyen de corriger ce comportement, et d'implémenter un joli effet slideDown?

Answer 1

Résumé: afficher/masquer la tr, animer les divs au sein de slideUp/slideDown

Le balisage: Le même

Le CSS:

.table-vmlist tr.row-vm { cursor:pointer; } 
.table-vmlist tr.row-details { display: none; } 
div.vmdetail-left { float: left; width: 50%; display:none; } 
div.vmdetail-right { float: right; width: 50%; display:none; } 

(divs Commençons caché aussi. ajouté pointeur curseur sur cliquable tr pour la facilité d'utilisation)

Et le jQuery:

$('tr.row-vm').bind('click',function(e){ 
    if ($(this).next().css('display') == 'none') 
    { 
     // Show tr, slideDown inner divs 
     $(this).next().show().find('div').slideDown('slow'); 
    } 
    else 
    { 
     // slideUp inner divs, hide parent tr after animation complete 
     $(this).next().find('div').slideUp('slow',function(){ 
      $(this).parent().parent().hide(); 
     }); 
    } 
}); 

(Notez que parent direct de divs est le td, donc parent appelé deux fois pour accéder à tr. Ajout de la vitesse de glissement.)