Проверка, отображается ли DIV в данный момент на странице

Question

Я изучаю jQuery, и на данный момент это мой код:

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

Это работает, когда вы нажимаете кнопку входа в систему, вызываемый DIV login-box отображается на странице.Что я хотел сделать, так это если снова нажать кнопку входа, то login-box DIV исчезнет со страницы.Каков был бы наилучший способ сделать это?Я тут подумал:

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

Но я в замешательстве от того, как бы я определил, отображается DIV или нет.Я также вижу, что в jQuery есть функция переключения, было бы это лучше?

Спасибо.

Answer 1

От Карл Сведберг

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

Затем вы можете сделать это:

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

Answer 2

$("#login-box:visible") сообщит вам, видно ли это, в то время как $("#login-box:hidden") говорит вам, если это не так.Однако более простым способом справиться с этим было бы использовать $.toggle() или даже $.slideToggle() если вы хотите немного дополнительного эффекта.

Answer 3

Я думаю, вы хотите использовать переключить().