Question

我正在学习jQuery，到目前为止这是我的代码：

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

当您单击登录按钮时，它会起作用，在页面上显示名为login-box的DIV。我想要做的是如果再次点击登录按钮，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

我想你想使用toggle()。

Answer 3

来自Karl Swedberg

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

然后，你可以这样做：

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

检查页面上当前是否显示DIV

3 个答案: