Check if all children elements are hidden

Question

I'm a bit stuck here with my script:

Its a checkbox filtering all .notme images and hiding it's list items. The problem is now I cant get a working callback function for the fadeToggle. It should behave like this :

If all children of #list-team-single-container are "displayed none" - do something.

$('#show-only-my-teams').change(function(){     $('.notme').each(function(){         $(this).parent().parent().fadeToggle('fast', function(){         });     }); });  

Answer 1

if($('#list-team-single-container').children(':visible').length == 0) {    // action when all are hidden } 

Answer 2

The :visible jQuery selector might be what you are looking for...

From the description

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation.

http://api.jquery.com/visible-selector/

---

$('#list-team-single-container').children(':visible'); 

That line of code will return all of the child elements of #list-team-single-container that are visible.

$('#list-team-single-container').children(':visible').length; 

That line of code will return the number of child elements of #list-team-single-container that are visible.