jquery - JQuery 淡入淡出 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

单击登录按钮时停止传播单击事件

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

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

Answer 2

因为这两个事件是同时触发的，所以您需要 stopPropagation ：

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

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

Answer 3

您可以以毫秒为单位设置淡入淡出的速度，或者仅将其称为“慢”：

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

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

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

Answer 4

这是由于文档和#login_cont 都被单击（#login_cont 是文档的一部分）

您可以通过更改来解决此问题

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

至

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