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