Verificando un DIV se muestra actualmente en la página

Question

Estoy aprendiendo jQuery y este es mi código hasta ahora:

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

Funciona, al hacer clic en el botón de inicio de sesión del DIV llamado login-box muestra en la página. Lo que quería hacer era si el botón de inicio de sesión se vuelve a hacer clic, el DIV login-box se desvanecerá de la página. Cuál sería la mejor forma de hacer esto? Estaba pensando:

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

Pero estoy confundido en cómo iba a determinar si el DIV está mostrando o no. También veo que jQuery tiene una función de activación, ¿sería mejor?

Gracias.

Answer 1

Karl Swedberg

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

A continuación, se puede hacer esto:

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

Answer 2

$("#login-box:visible") le dirá si es visible, mientras que $("#login-box:hidden") le dice si no lo es. Sin embargo, una forma más fácil de manejar esto sería usar $.toggle() o incluso $.slideToggle() si quieres un poco de un efecto añadido.

Answer 3

Creo que desee utilizar de palanca () .