javascript - 使元素自动消失的 JQuery 或 Javascript

Question

所以我正在制作一个唱首歌游戏并且有点卡住了。当您获得成就时，我想要一个像 cookieClicker 那样的弹出窗口。它会弹出并告诉您发生了什么，您可以单击 x，否则它会在几秒钟后消失。

我尝试用纯 javascript 和 CSS 制作一些东西但无济于事，它会很好地消失但不会自动消失。

那么，我该如何做到无论何时制作/显示 X 元素，它都会在 3 秒后消失？

此外，如果重要的话，元素将由 javascript 函数创建，并且可以同时创建多个元素。

附言我尝试搜索并在 javascript 中找到了一些关于自动淡化的内容，但似乎也没有任何效果。

编辑:在尝试查看 cookieclicker 源并再次玩游戏后，它似乎甚至没有此功能。我可以比较的最接近的事情是，当您在网站上向购物车添加商品时，它会提醒您该商品已添加，然后消失。

Answer 1

这是一种使用 Javascript 触发 CSS 转换的方法:

var button = document.getElementsByTagName('button')[0];
var div = document.getElementsByTagName('div')[0];

function autoFader() {

if (window.getComputedStyle(div).getPropertyValue('display') === 'none') {

    div.style.display = 'block';

        setTimeout(function(){
            div.style.opacity = '0';
        },10);

        setTimeout(function(){
            div.removeAttribute('style');
        },4010);

    }
}

button.addEventListener('click',autoFader,false);

div {
display: none;
width: 200px;
height: 100px;
margin: 20px auto;
padding: 6px;
font-size: 20px;
color: rgb(255,255,255);
text-align: center;
border: 3px solid rgb(127,0,0);
background-color: rgb(255,0,0);
opacity: 1;
transition: opacity 3s linear 1s;
}

<button type="button">Click Me</button>

<div>
<p>Hi, I'm an auto-fading pop-up.</p>
</div>