javascript - 點擊時調整滑動切換的速度

Question

有人可以幫助使用此代碼。

概述

• 具有顯示/表隱藏TR

看到代碼：jsfiddle

<table> 
    <tr class="title"> 
     <td>Column1</td> 
    </tr> 
    <tr class="hidden"> 
     <td> content > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nibh ullamcorper, ultrices leo quis, ultricies ex. Suspendisse pulvinar facilisis nulla, eu fringilla ante congue non. Phasellus bibendum interdum ligula sit amet consectetur. Ut facilisis urna tempor libero convallis sollicitudin. In malesuada sollicitudin urna sit amet molestie. Aliquam ut facilisis massa. Nunc diam eros, lobortis sit amet libero in, luctus volutpat est. Duis egestas at ligula ac ullamcorper. Sed eleifend ac diam vel aliquam. Nam in fringilla urna. Vivamus porttitor dictum arcu ut congue. Vestibulum egestas dolor ut neque tincidunt maximus. Maecenas quis congue nisi. </td> 
    </tr> 
</table> 

問：

• 會有人告訴我如何調整滑動切換的速度？

感謝

Answer 1

你可以通過時間來的slideToggle方法。請參考http://api.jquery.com/slidetoggle/

$(function(){ 
     $('.title').click(function(){ 
      $(this).nextUntil('tr.title').slideToggle(10); 
     }); 
    }); 

Answer 2

有很多方法可以做到這一點。最簡單的方法是使用css。

HTML

<table> 
    <tr class="title"> 
     <td>Column1</td> 
    </tr> 
    <tr class="hidden"> 
     <td> content > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nibh ullamcorper, ultrices leo quis, ultricies ex. Suspendisse pulvinar facilisis nulla, eu fringilla ante congue non. Phasellus bibendum interdum ligula sit amet consectetur. Ut facilisis urna tempor libero convallis sollicitudin. In malesuada sollicitudin urna sit amet molestie. Aliquam ut facilisis massa. Nunc diam eros, lobortis sit amet libero in, luctus volutpat est. Duis egestas at ligula ac ullamcorper. Sed eleifend ac diam vel aliquam. Nam in fringilla urna. Vivamus porttitor dictum arcu ut congue. Vestibulum egestas dolor ut neque tincidunt maximus. Maecenas quis congue nisi. </td> 
    </tr> 
</table> 

的Javascript

$(function(){ 
    $('.title').click(function(){ 
    $(this).nextUntil('tr.title').toggleClass('show'); 
    }); 
}); 

CSS

tr.hidden { 
    visibility: hidden; 
    opacity: 0; 
    transition: opacity .2s ease-in-out; 
} 

tr.show { 
    visibility: visible; 
    opacity: 1; 
}