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

Question

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

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

Answer 1

动画opacity元素的属性,这将确保元素不会从dom中隐藏(保留其他项目),但会以渐弱的方式使其不可见.

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

.fadeOut()不会起作用,仅仅是因为它最终转化为display: none打破原始文档流程.

伪代码示例:

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

div {
  background-color: #F00;
}

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