JQuery if is visible doesnt work with parent-child?

Question

I have a parent DIV (.box) and a child (#display). I would like fade out the parent if the child is hidden. But it still doenst work :S

if( $('#display').is(':visible') ) {
     $(this).parent(".box").fadeTo(100,1);
} else {
     $(this).parent(".box").fadeTo(100,0.7);
}

Answer 1

Hard to tell exactly what advice to give, since I don't know what is triggering this code.

I'll assume this is not in an event handler.

var $display = $('#display');  // cache #display for better performance

if( $display.is(':visible') ) {
     $display.parent(".box").fadeTo(100,1);
} else {
     $display.parent(".box").fadeTo(100,0.7);
}

The value of this will reference the element receiving an event inside its event handler. This does not work the same for if() statements.

Answer 2

Most likely you're not using $(this) correctly. Try changing your code to:

if( $('#display').is(':visible') ) {
     $('#display').parent(".box").fadeTo(100,1);
} else {
     $('#display').parent(".box").fadeTo(100,0.7);
}

You can read more about the this keyword in ppk's site.

Answer 3

Reinis' code should work, if not try this:

if( $('#display')[0].is(':visible') ) {
     $('#display')[0].parent().fadeTo(100,1);
} else {
     $('#display')[0].parent().fadeTo(100,0.7);
}

Also, make sure you're firing this code. Try putting some alerts in there to be sure.