Question

我想让slideDown工作。我从php查询中将一些数据附加到div。然后我想使用slideDown。相反，它只是出现了。我尝试fadeIn和淡入淡出动画。我的传入数据已经显示：无风格。为什么我的slideDown只显示它，但fadeIn有效？

if($(childTableId).length){
            $(childTableId).remove();
        }else{
            $('#'+rowId).append(data); //Append the incoming PHP table to this div
            $(childTableId).slideDown(1000);
        }

此外，如果我使用slideUp（“slow”）来隐藏它（在remove（）之前），我发现它在消失之前需要一段“缓慢”的时间。基本上动画的幻灯片部分没有发生。

Answer 1

它不能slideDown()，因为它不存在。

if($(childTableId).length){
  // If the element exists - remove it from the DOM
  $(childTableId).remove();
} else {
  // The element doesn't exist!
  $('#'+rowId).append(data);
  // By definition ... the element doesn't exist in the DOM, 
  // so it CANNOT be made to appear with slideDown()
  $(childTableId).slideDown(1000);
}

Answer 2

似乎JQuery无法在slideDown();元素上执行slideUp();或<table>之类的动画。

试试这个：

<table id="myTable" style="display:none">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Ian Spence</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bill Billy</td>
        </tr>
    </tbody>
</table>
<a href="#" onClick="$('#myTable').fadeIn();">Click Me</a>

该表格会很好地淡入，但会将fadeIn();更改为slideDown();并突然显示该表格。

参考this对类似问题的回答：

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

jquery slideDown（）不起作用，但fadeIn（）可以

2 个答案: