可见性：隐藏的传播缓慢传给孩子？

问题描述

我有一些带有'effect'类的嵌套元素，如下所示：

<style>
   .effect { transition: opacity 1s, visibility 1s; }
</style>

<div id=parent class=effect>
   <a href=#>aaaaaaaaaaaaa</a>
   <div id=child class=effect>
      <a href=#>bbbbbbbbbbbbbb</a>
      <div id=childofchild class=effect>
        <a href=#>cccccccccccc</a>
      </div>
   </div>
</div>

通常我会调用以下内容来淡出父块，包括所有孩子：

$('#parent').css({'opacity':0, 'visibility':'hidden'});

但是我注意到了奇怪的行为（即使在所有内容都应该被隐藏的时候，某些链接也是可点击的），所以我删除了不透明度更改来演示问题：

$('#parent').css({'visibility':'hidden'});

这应该跳过不透明度的变化并且像以前一样 - 所以它应该在第一秒之后隐藏父（以及我假设的所有子节点），但它有点奇怪，它表明隐藏子节点需要几秒钟序列。

看起来效果只有在完成子元素后才会缓慢传播。 如何在第一秒之后隐藏包括所有孩子在内的元素，但是不需要暂时删除所有孩子的“效果”课程？

删除最后2项的effect类，它可以正常工作：

<div id=parent class=effect>
  <a href=#>aaaaaaaaaaaaa</a>
  <div id=child>
  <a href=#>bbbbbbbbbbbbbb</a>
  <div id=childofchild>
    <a href=#>cccccccccccc</a>
  </div>
 </div>
</div>

更新小提琴： ：

您所描述的行为的原因是您已经为每个子元素进行了转换，因此当脚本到达这些子元素时，它会在执行visibility: hidden之前等待一秒钟visibility: hidden 。

编辑：如果你不想删除类，你可以使用hide()或fadeOut() ，这也将为隐藏添加一个很好的小效果。 如果你hide(1000)它也会为隐藏添加一个微妙的效果。

查看更新的小提琴（仅使用hide() ）： ：

转换以级联方式工作。 因此，当您将visibility: hidden到父元素时，它需要1秒才能完成隐藏。 最后，当它正式visibility: hidden ，浏览器会对子元素进行样式重新计算，现在继承父级的visibility: hidden 。 应用这种新风格需要1秒，依此类推。

这就是为什么3个子元素需要3个 - 每个元素需要1才能成为visibility: hidden ，然后只有子元素继承属性并应用它自己的转换。

此外，您的HTML无效，因为它缺少一堆引号 - 这是固定的HTML：

<div id="parent" class="effect">
   <a href="#">aaaaaaaaaaaaa</a>
   <div id="child" class="effect">
      <a href="#">bbbbbbbbbbbbbb</a>
      <div id="childofchild" class="effect">
        <a href="#">cccccccccccc</a>
      </div>
   </div>
</div>

感谢评论，我能够理解那里发生的事情。 因此，要隐藏父项及其所有子项，需要使用以下代码同时在所有子项上设置“隐藏”，因此效果的转换同时运行：

$('#parent').find('.effect').addBack().css({'visibility':'hidden'});

这会将隐藏的css样式添加到具有效果类的所有元素以及父类（使用addBack（））。

您的要求：

all elements should be hidden in 1 second. But it takes 3 seconds to hide the last!

你需要的是：