Question

我有一些带有＆＃39;效果的嵌套元素＆＃39;上课，像这样：

<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

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

Answer 1

因为你有上课和＃34;效果＆＃34;还有关于儿童元素。因此，找到它的每个元素需要1秒。

从内部元素中删除该类，它将正常工作。

如果你没有兴趣保留隐藏元素的空白空间，你可以使用＆＃34; display：none＆＃34;正如Nerdkowski所建议的

Answer 2

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

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

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

编辑：如果您不想删除这些类，可以使用hide()或fadeOut()来删除这些类，这也会为隐藏添加一些不错的效果。如果你执行hide(1000)，它还会为隐藏添加一个微妙的效果。

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

Answer 3

转换以级联方式工作。因此，当您将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>

Answer 4

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

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

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

Answer 5

您的要求：

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

你需要： link

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

5 个答案: