Question

This is what I am ultimately trying to achieve:

//When the user clicks the liveshow button this happens
$(".liveshow-button").live('click', function() {
    if ($(".liveshowDiv2").css('display') == 'none') {
        $(".liveshowDiv2").fadeOut(ifadeOutSpeed, function() {
            $('#wrapper-div').animate({ 
                height: $('.liveshowDiv1').height() + "px" 
            }, 
            iresizeSpeed, function() {
                $('.liveshowDiv1').fadeIn(ifadeInSpeed, function());
            });
        });
    }
    else {
        alert('This never gets displayed');
        $(".liveshowDiv1").slideUp('fast');
    }
});

Basically I want to toggle between liveShowDiv1 being displayed and hidden when you click this button. But since other things on the page can make liveShowDiv1 hidden, I can’t just make a toggle function to do this. I have to check somehow to see if liveShowDiv1 is being displayed or not.

When it not displayed: display = none

When it is showing display is not in the style tag at all

How can I tell in JQuery when this div is displayed?

Answer 1

if ( $(this).is(':visible') ) should work for this relatively simple show/hide.