jquery - 如何随时间显示和隐藏 div 并单击选项以隐藏包含？

Question

我有一个 div，display: none;我想显示它，然后用 in 隐藏它，5 seconds但如果同时用户点击 div，它应该在点击后消失。并且似乎我不能同时消失并单击选项。

这里是代码。

$('#div').fadeIn();
$('#div').delay(5000).fadeOut();
$('#div').click(function(){
    $(this).fadeOut();
});

如果我拿出$('#div').delay(5000).fadeOut();它不会消失，直到我点击。

如果我拿出$('#div').click(function(){ $(this).fadeOut(); });它，当用户点击它时它不会消失。

附加信息

问题是如果我$('#div').delay(5000).fadeOut();在点击代码之前或之后添加它。div 将等待 5 秒，并且 div 将无法点击。

Answer 1

这应该可以满足您的需求。

$('#div').fadeIn();
timerId = setTimeout(function(){
    $('#div').fadeOut();
}, 5000);
$('#div').click(function(){
    $(this).fadeOut();
    clearTimeout(timerId);
});