Verifica se un DIV è attualmente visualizzata sulla pagina

Question

Sto imparando jQuery e questo è il mio codice finora:

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

Funziona, quando si fa clic sul pulsante di login DIV chiamato login-box mostra sulla pagina. Quello che volevo fare era se il pulsante di accesso è stato cliccato di nuovo, il DIV login-box svanirà dalla pagina. Quale sarebbe il modo migliore per farlo? Stavo pensando:

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

Ma io sono confuso come avrei determinare se il DIV sta mostrando o meno. Ho anche vedere che jQuery ha una funzione di commutazione, che sarebbe stato meglio?

Grazie.

Answer 1

Karl Swedberg

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

Quindi, si può fare questo:

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

Answer 2

$("#login-box:visible") vi dirà se è visibile, mentre $("#login-box:hidden") ti dice se non lo è. Tuttavia, un modo più semplice di gestire questo sarebbe quella di utilizzare $.toggle() o anche $.slideToggle() se volete un po 'di un effetto aggiunto.

Answer 3

Credo che si desidera utilizzare ginocchiera () .