Verificando se uma div é mostrada atualmente na página

Question

Estou aprendendo jQuery e este é o meu código até agora:

<script type="text/javascript">
$(document).ready(function(){
    $('#login').click(function(){
        $('#login-box').fadeIn('fast');
    });
});
</script>

Funciona, quando você clica no botão de login, o div chamado login-box mostra na página. O que eu queria fazer era se o botão de login fosse clicado novamente, o login-box Div desaparecerá da página. Qual seria a melhor maneira de fazer isso? Eu estava pensando:

$(document).ready(function(){
    $('#login').click(function(){
        if(login-box-is-showing)
        {
            $('#login-box').fadeOut('fast');
        } else {
            $('#login-box').fadeIn('fast');
        }
    });
});

Mas estou confuso com a forma como determinaria se a div está aparecendo ou não. Eu também vejo que o jQuery tem uma função de alternância, isso seria melhor?

Obrigado.

Answer 1

a partir de Karl Swedberg

jQuery.fn.fadeToggle = function(speed, easing, callback) { 
   return this.animate({opacity: 'toggle'}, speed, easing, callback); 
};

Então, você pode fazer isso:

$("#login").click(function () { 
         $("#login-box").fadeToggle() 
 }); 

Answer 2

$("#login-box:visible") dirá a você se é visível, enquanto $("#login-box:hidden") diz a você se não for. No entanto, uma maneira mais fácil de lidar com isso seria usar $.toggle() ou até $.slideToggle() Se você deseja um efeito adicional.

Answer 3

Eu acho que você quer usar alternar().