如何在使用jQuery保持空间的同时淡出元素？

Question

我正在使用一段jQuery代码来隐藏表格单元格，同时保留空间。它工作得很好，但我想知道如何让元素淡出。我尝试添加.fadeOut()，但无法让它发挥作用。

$(this).closest('td').css('visibility', 'hidden');

Answer 1

为元素的opacity属性设置动画，这将确保元素不会从dom中隐藏（保留其他项目），但会以渐弱的方式使其不可见。

$(this).closest('td').animate({opacity: 0}, 2000)

.fadeOut()无法正常工作，只是因为它最终转换为display: none，从而打破了原始文档流程。

伪代码示例：

＆＃13;

＆＃13;

$('.hello').animate({opacity: 0}, 2000)

＆＃13;

div {
  background-color: #F00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hello">hello</div>
<div class="world">world</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用$.fadeTo(fast, 0.01)代替$.fadeIn()。