Question

我有一个按钮，点击它时会显示一个登录信息。我希望如果输入没有点击（比方说）10秒后，.login将隐藏，按钮将再次显示。

标记：

<button>login</button>

<div class="login" style="display:none">
    <input type="text" placeholder="username">
    <input type="text" placeholder="password">
    <input type="submit" value="send">
</div>

JS：

$(function(){
    $('button').click(function(){
        $(this).fadeOut(200, function(){
            $('.login').fadeIn();
        });        
    });
});

演示：http://jsfiddle.net/Lxohzxt9/

Answer 1

您可以使用setTimeout和clearTimeout

执行此操作

$(function(){
    var timer;
    $('button').click(function(){
        $(this).fadeOut(200, function(){
            $('.login').fadeIn();
            timer = setTimeout(function() {
                $('.login').fadeOut(function() {
                    $('button').fadeIn();
                });
            }, 2000); // 2 seconds for demo
        });        
    });
    
    $('input[type="text"]').on('focus',function() {
       clearTimeout(timer); 
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>login</button>

<div class="login" style="display:none">
    <input type="text" placeholder="username">
    <input type="text" placeholder="password">
    <input type="submit" value="send">
</div>

Answer 2

这样做（根据需要修改）：

$（函数（）{

var clickedOnInput = false;
$('.login').on('mousedown', 'input', function(){
    clickedOnInput = true;
});
$('button').click(function(){
    $(this).fadeOut(200, function(){
        $('.login').fadeIn();
        setTimeout(function(){
           if (!clickedOnInput) 
           {
            //fadeback to other panel 

           }
           clickedOnInput = false; // reset the variable
        }, 10000)
    });        
});

}）;

jquery检测用户是否点击了输入 - 如果没有做某事

2 个答案: