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