我有一些嵌套的元素,带有“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 看起来效果只会在完成到子元素后缓慢传播。如何在第一秒后隐藏包括所有子元素的元素,但不需要暂时删除所有子元素上的“effect”类呢?