2

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

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

它有效，当您单击登录按钮时，称为 DIVlogin-box的页面上显示。我想做的是，如果再次单击登录按钮，login-boxDIV 将从页面中消失。最好的方法是什么？我刚在想：

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

但我对如何确定 DIV 是否显示感到困惑。我还看到jQuery有一个切换功能，那会更好吗？

谢谢。

4

3 回答 3

4

$("#login-box:visible")会告诉你它是否可见，而$("#login-box:hidden")告诉你它是否不可见。然而，一个更简单的处理方法是使用$.toggle()，或者即使$.slideToggle()你想要一点额外的效果。

于 2010-01-06T19:37:41.583 回答
3

我认为您想使用toggle()。

于 2010-01-06T19:39:13.250 回答
3

来自卡尔·斯威德伯格

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

然后，您可以这样做：

$("#login").click(function () { 
         $("#login-box").fadeToggle() 
 });
于 2010-01-06T19:41:30.960 回答