How to detect if element was faded out

Question

I want to have two buttons, one to fade div1 out, and one either to fade div1 in, or to fade out the button itself, if the div1 is already hidden. here's the code, pretty unnecessary though, cause my main problem is "if" statement...

$('#b > button').click(function(){
    $('#div1').fadeOut(400)
});

$('#div2 > button').click(function(){
    $('#div1').fadeIn(400)
});

Solution 1

Why not to disable/enable the buttons?

$('#b > button').click(function(){
    $('#div1').fadeOut(400, function() {
        $(this).prop('disabled', true);
        $('#div2 > button').prop('disabled', false);
    });
});

$('#div2 > button').click(function(){
    $('#div1').fadeIn(400, function() {
        $(this).prop('disabled', true);
        $('#b > button').prop('disabled', false);
    });
});

Solution 2

FadeOut simply changes the display to none.

Check if the display is none using jQuery's $('selector').css('display') or $('selector').is(':visible')