javascript - 如何通过 JQuery 为特定时间添加 CSS 属性(2 秒后恢复正常)

Question

我想为元素 (div) 设置一个 CSS 属性 just 2 秒。这是我的尝试:

html:

<div class="div">foo</div>
<input class="btn" type="button" value="click" />

jquery:

$(".btn").click(function(e) {
   $(".div").css({"border": "1px solid #ccc"});
});

但是上面的代码是永久有效的，如何限制在特定的时间段内呢？

Answer 1

我认为使用 css class 可能是最好的解决方案，因为我不知道上一个边框样式或其他应用于元素的 css 规则:

CSS

.borderStyle{
    border: 1px solid #ccc!important;
}

js

$('.btn').click(function(){
    $('.div').addClass("borderStyle");
    setTimeout(function(){ $('.div').removeClass("borderStyle"); }, 2000);
});

切换类版本

$('.btn').click(function(){
    $('.div').toggleClass("borderStyle");
    setTimeout(function(){ $('.div').toggleClass("borderStyle"); }, 2000);
});

fiddle

不知道为什么 toggleclass 对你不起作用，但让它在我的答案中显示以供将来评论