jQuery slideDown + CSS Floats

Question

我正在使用一個有多行的HTML表。每隔一行（包含前一行的詳細信息）都使用CSS隱藏。

當單擊第一行時，第二行將顯示使用jQuery show()。這很好，但我更喜歡slideDown-Effect。

問題是，在細節行中，有兩個浮動DIV，一個浮動在左邊，一個在右邊。現在，如果我滑動以前隱藏的行，則包含的DIV行爲會很奇怪，並且會「跳來跳去」。看到這個gif動畫明白我的意思：http://ich-wars-nicht.ch/tmp/lunapic_127365879362365_.gif

的標記：

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

的CSS：

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

而jQuery代碼：

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

是否有方法來解決這種行爲，並實現一個不錯的slideDown效果？

Answer 1

摘要：顯示/隱藏TR，與效果基本show /了slideDown

的標記內動畫的div：同樣

的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; } 

（div的開始隱也。將指針光標添加到可點擊的tr以供使用）

而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(); 
     }); 
    } 
}); 

（請注意，div的直接父項是td，所以父項調用兩次來訪問tr。還增加了滑動速度。）