检查页面上当前是否显示 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

我想你想使用切换（）。