Visibility:hidden propagates slowly to childs?

Question

I have some nested elements with 'effect' class, like this:

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

Normally I would call the following to fade out the parent block including all childs:

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

But I noticed strange behavior (some links are clickable even at the point when everything should be hidden), so I removed the opacity change to demonstrate the problem:

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

This should skip the opacity change and behave like before - so it should hide the parent (and all childs, as I assume) after only the first second, but it is somehow strange, it demonstrates that it takes several seconds to hide the childs in sequence.

jsfiddle

It looks like the effect propagate slowly only after it completes to the child elements. How do I hide the element including all childs after the first second, but without the need to temporarily remove the 'effect' class on all the children?

Answer 1

It's becuase you have class "effect" also on the children element. So it takes 1s for each element with that class that it is found.

Remove the class from the inner elements and it will work just fine.

If you are not interesting in keeping the empty space of the hidden elements you can use "display:none" as suggested by Nerdkowski