Html 在图像上显示div单击x秒后将其隐藏

我试图在单击图像时显示一个div，然后在给定的秒数后隐藏它。我发现了两个单独的代码示例，它们符合我的需要，但我不知道如何将它们组合在一起

使内容在x秒后消失的代码：

<script>
    window.setTimeout(function() {
        $('#fadeout').hide(2000);
    }, 4000);
</script>

<SCRIPT>
function fade(div_id, button) {

    if(button.value == 'FadeOut') {
        $('#'+div_id).fadeOut('slow');
        button.value = 'FadeIn';
    }
    else {
        $('#'+div_id).fadeIn('slow');
        button.value = 'FadeOut';
    }
}

$('#sometext').fadeOut(2);
</script>

setTimeout（函数（）{
$（#fadeout'）。隐藏（2000年）；
}, 4000);

使div出现在图像上的代码单击：

<script>
    window.setTimeout(function() {
        $('#fadeout').hide(2000);
    }, 4000);
</script>

<SCRIPT>
function fade(div_id, button) {

    if(button.value == 'FadeOut') {
        $('#'+div_id).fadeOut('slow');
        button.value = 'FadeIn';
    }
    else {
        $('#'+div_id).fadeIn('slow');
        button.value = 'FadeOut';
    }
}

$('#sometext').fadeOut(2);
</script>

功能淡入淡出（div_id，按钮）{
如果（button.value=='FadeOut'）{
$（'#'+div_id）.fadeOut（'slow'）；
button.value='FadeIn'；
}
否则{
$（'#'+div_id）.fadeIn（'slow'）；
button.value='FadeOut'；
}
}
$（#sometext'）。淡出（2）；

您可以使用毫秒的时间值，而不是使用“慢”。

也许这有助于：

$('#fadeout').hide(); // hide div
$('img').live('click', function(e){ 
    e.preventDefault(); //cancel default action of click
    $('#fadeout').show().delay(5000).fadeOut(1000); //show div on img click then hide after 5 seconds
});

---

这是一个工作示例：

感谢您的重播。但我似乎无法让它工作。我想要一个div在5秒钟后当我点击图像时消失（不是5秒钟内慢慢消失，而是5秒钟后慢慢消失，大约1秒钟）。你能给我发一个最终的密码吗？谢谢相似的帖子在