Question

我想平稳地向下滑动tabe行。

现在的问题是，它会立即出现并隐藏，我怎样才能让它顺利进行。

**Please check this fiddle:**

http://jsfiddle.net/5WT9g/2/

HTML：

<a href="javascript:void(0)" id="showContent">Show Content</a>
<br><br><br>
<table width="400" border="1">
    <tr id="mainContent" style="display:none;">
        <td> THIS IS MAIN CONTENT </td>
    </tr>
</table>

JS：

 $('#showContent').click(function ()
                         {



   $('#mainContent').slideToggle('slow');                      

                         });

Answer 1

我认为您的意思是使用slideToggle()而不是toggleslide()。

但是，对于表格单元格，动画仍然无法顺利运行。如果为tr设置高度，它将更加顺畅。对于完全平滑的动画，我建议使用div代替。

以下是代码的修改版本，其中包含一些带表格的平滑动画： http://jsfiddle.net/TS77v/1/

如您所见，您必须在td而不是tr上制作动画。我还必须设置td的高度才能生效，否则它会出现并消失。

为什么动画在表格上不能正常工作？

来自Chaffer和Swedberg的“学习jQuery”

自从浏览器以来，表行对动画存在特殊障碍使用不同的值（表格行和块）进行可见显示属性。没有动画的.hide（）和.show（）方法是始终可以安全地使用表行。从jQuery版本1.1.3开始，也可以使用.fadeIn（）和.fadeOut（）。

供参考：https://stackoverflow.com/a/920480/3016565

Answer 2

使用div会更容易，但是如果您更喜欢/需要表，那么就是表。我通过在表格单元格中放置一个div来实现它ja使用slideToggle来实现它。是的，它仍然添加了div，但至少你得到了表格结构。为了使其工作，您需要对HTML代码进行微小的更改，JS保持不变：

HTML

<a href="javascript:void(0)" id="showContent">Show Content</a>
<br><br><br>
<table width="400" border="1">
    <tr>
        <td><div style="display: none;" id="mainContent">THIS IS MAIN CONTENT</div></td>
    </tr>
</table>

小提琴：http://jsfiddle.net/32HR9/1/

获取您无法更改HTML的信息

我假设你可以编辑javascript？你没有说过这件事。这个技巧并不整洁，但是没有必要改变HTML，它完成了工作：

所以，使用jQuery

使tr可见。
将tr的内容包装在div中。
隐藏div。
使slideToggle与创建的div一起使用。

代码

$('#mainContent').css('display', 'table-row');
$('#mainContent > td').wrapInner("<div class='hideshow'></div>");
$('.hideshow').css('display', 'none');

$('#showContent').click(function (){                        
    $('.hideshow').slideToggle('slow');                                           
});

和小提琴：http://jsfiddle.net/5E5VS/7/

Answer 3

 Try this.
 <a href="javascript:void(0)" id="showContent">Show Content</a>
 <table id="mainContent" width="400" border="1">
 <tr>
    <td> <p style="display: none"> THIS IS MAIN CONTENT</p></td>
  </tr>
</table>


 $("#showContent").click(function () {
 $('#mainContent').find("p").slideToggle();
 });

平滑地慢慢地向下滑动表格行

3 个答案:

为什么动画在表格上不能正常工作？

获取您无法更改HTML的信息