添加然后在延迟后删除 class 但没有页面刷新

Question

我在单击时添加 class .error，现在在 2 秒的时间间隔后我想删除此 class，但没有页面 reload/refresh。我在 jQuery 中使用 delay() 作为：

$('#username').addClass('error').delay(2000).removeClass('error');

但它不起作用。

然后我试了setTimeout()。

正在运行，但正在重新加载页面。我想要在特定时间后添加然后删除 class 但不 refresh/reload 页面的内容。

请帮忙，提前谢谢你。

Answer 1

var element = document.getElementById('username');

element.classList.add('error');

window.setTimeout(function () {
  element.classList.remove('error');
}, 2000);

#username {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: white;
  background-color: green;
  text-align: center;
  transition: background-color .25s linear;
}
#username.error {
  background-color: red;
}

<div id="username">Username</div>

Answer 2

使用jquery和setTimeout函数：

var $elm = $("#username").addClass("error");
setTimeout(function() {
  $elm.removeClass("error");
}, 2000);

.error{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="username">USER NAME</div>

添加然后在延迟后删除 class 但没有页面刷新

Add then remove class after delay but without page refresh

javascript

jquery

delay

settimeout

removeclass