Проверка, отображается ли в данный момент 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

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

Answer 2

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

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

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

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

Answer 3

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