jqueryを使用して奇妙な結果を表示/非表示する

Question

テーブル内のテキストボックスとラベルをスライドさせようとしています。 、スライドのトグルはうまくいきますが、チェックボックスをクリックすると効果がスムーズに動かないテキストボックスとラベルが奇妙な方法で見えるようになり、右からトグルしてフィールド間にギャップが残ると、ギャップは毎回増えますチェックボックスをクリックします。以下のコードは次のとおりです。

<script type="text/javascript"> 

$(document).ready(function() { 
    var $startdates = $('#startDates'); 
    var $endDates = $('#endDates'); 
    $startdates.hide(); 
    $endDates.hide(); 

    $('#all').click(function() { 
     $startdates.slideToggle('slow'); 
     $endDates.slideToggle('slow'); 
     return false; 

    }); 
}); 
</script> 


<tr id="startDates"> 
     <td> 
     <div class="editor-label"> 
      <%: Html.LabelFor(model => model.StartDate) %> 
     </div> 
     </td> 
     <td> 
     <div class="editor-field"> 
      <%: Html.TextBoxFor(model => model.StartDate) %> 
      <%: Html.ValidationMessageFor(model => model.StartDate) %> 
     </div> 
     </td> 
     </tr> 

     <tr id="endDates"> 
     <td> 
     <div class="editor-label"> 
      <%: Html.LabelFor(model => model.EndDate) %> 
     </div> 
     </td> 
     <td> 
     <div class="editor-field"> 
      <%: Html.TextBoxFor(model => model.EndDate) %> 
      <%: Html.ValidationMessageFor(model => model.EndDate) %> 
     </div> 
     </td> 
     </tr><tr></td> 
     <td><input type="checkbox" name="All" id="all" /><label>All</label></td> 
     </tr> 

Answer 1

切り替えエフェクトを使用する場合trとtd要素はexpecially、推奨されません（がTR上の効果を使用しないでください！）

あなたの要素を表示するために、これを試してみてください：

は.show()によって.slideToggle()を交換してください、または動作しない場合は、.css('display', 'table-row')

Answer 2

は、CSSやJavaScriptを使用して、高さ.editor-labelと.editor-fieldを与えます。

高さが設定されていない場合、jQueryは高さが拡大/アニメーション化されていると推測する必要があるため、アニメーション機能は正しく動作しません。