Javascript 使用CSS动画和jQuery删除div消息

我使用PHP打印成功消息，如下所示：

<div class='alert alert-success'>Success!!</div>

---

现在，我需要使用jQuery在5秒后用CSS动画（淡出）删除成功消息。我怎么才能创造这个

您可以创建一个隐藏类，通过转换将不透明度设置为0来隐藏元素，并使用JavaScript将该类添加到div中

CSS

JS

HTML

成功！！

---

签出这个。

这就是你要找的吗

setTimeout(animateUp, 5000);

function animateUp() {
    $(".alert").css({'-webkit-animation' : 'fadeOutUp 5s infinite'});
}

或者将

.fadeout

CSS更新为

.fadeOutUp {
    -webkit-animation: fadeOutUp 5s infinite;
     animation: fadeOutUp 5s infinite;
}

那你就可以了

setTimeout(animateUp, 5000);

function animateUp() {
    $(".alert").addClass("fadeOutUp");
}

---

@T-M注意不是jQuery fadeOut，而是纯CSS和JS。你只需要使用JS将类“hide”添加到元素中。@T-M如果你想使用CSS类，模式仍然相同，请替换我的类。为你的类隐藏。fadeOut我认为你的动画有问题。我不知道到底需要什么样的效果，但请检查此代码笔：（），工作正常。我的问题在您的演示中，所以请删除消息并再次显示。我需要删除任何css动画。比如：你说的是codepen演示版吗？我看不出你在说什么。在代码笔中，消息已被删除，并且不再显示。

<div id='yourDiv' class='alert alert-success'>Success!!</div>

setTimeout(animateUp, 5000);

function animateUp() {
    $(".alert").css({'-webkit-animation' : 'fadeOutUp 5s infinite'});
}

.fadeOutUp {
    -webkit-animation: fadeOutUp 5s infinite;
     animation: fadeOutUp 5s infinite;
}

setTimeout(animateUp, 5000);

function animateUp() {
    $(".alert").addClass("fadeOutUp");
}