JQuery fadeIn，fadeOut div

Question

我有一个按钮（“login_button”）。每次我点击按钮，我都想要一个DIV（“login_cont”）出现。之后，如果我点击页面上的其他任何地方，我希望这个DIV再次消失。

这是我的代码

$(document).ready(function(){
$('#login_button').click(function(e){
    $('#login_cont').fadeIn();
});
$(document).click(function(e){
    $('#login_cont').fadeOut();
});
});

这对我来说很好看（我是新手）。 但。每次我点击按钮，div都会出现，但是也会在不到一秒的时间内消失...为什么以及如何解决？

Answer 1

您可以设置褪色的速度数毫秒，或者只需调用它即可＃34;慢＆＃34;：

$('#login_button').click(function(e){
    $('#login_cont').fadeIn(3000);
    return false;
});

$(document).click(function(e){
    $('#login_cont').fadeOut('slow');
    return false;
});

更新（上图）：如果默认点击将提交，则返回false以防止默认点击操作。

Answer 2

单击登录按钮

时停止传播click事件

$(document).ready(function(){
            $('#login_button').click(function(event){
                event.stopPropagation()
                $('#login_cont').fadeIn();
            });

            $(document).click(function(e){
                $('#login_cont').fadeOut();
            });
});

Answer 3

这是因为文档和#login_cont都被点击了（#login_cont是文档的一部分）

您可以通过更改

来解决此问题

$(document).click(function(e){
                $('#login_cont').fadeOut('slow');
            });

到

$('#login_cont').onblur(function(e){
                $('#login_cont').fadeOut('slow');
            });

Answer 4

因为在同一时间触发了两个事件，你需要停止传播：

$(document).ready(function(){
                $('#login_button').click(function(e){
                    $('#login_cont').fadeIn();
                    e.stopPropagation();
                });

                $(document).click(function(e){
                    $('#login_cont').fadeOut();
                });
});