可见性：隐藏会慢慢传播给孩子吗？

Question

我有一些带有“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'});

这应该跳过不透明度更改并像以前一样运行 - 因此它应该在第一秒后隐藏父级（以及所有子级，正如我假设的那样），但它有点奇怪，它表明需要几秒钟才能隐藏子级顺序。

jsfiddle

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

Answer 1

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

更新的小提琴： http: //jsfiddle.net/a3dbyudy/5/

您所描述的行为的原因是您为每个子元素都有一个转换，因此当脚本到达这些子元素时，它会在执行visibility: hidden.

编辑：如果您不想删除您可以使用的类hide()，或者fadeOut()这也会为隐藏添加一个不错的小效果。如果你hide(1000)这样做，也会给隐藏带来微妙的效果。

查看更新的小提琴（仅使用hide()）：http://jsfiddle.net/a3dbyudy/8/