jquery - 几秒钟后点击删除或添加css样式

Question

如何删除或添加.css()但延迟？在我的示例中，我在单击时添加边框颜色.s_edit并在单击时将其删除.s_done。问题是我不想立即删除边框颜色，而是在 2 秒后。看起来.delay()不起作用，我不知道如何使用setTimeout或类似的东西。

JSFiddle：http: //jsfiddle.net/5Bc3K/1/

HTML：

<div class="main">
    <a href="#" class="s_edit">Edit</a>    
    <a href="#" class="s_done">Done</a>
</div>

查询：

$('.s_edit').click(function(e){
    e.preventDefault();

    var parent = $(this).parents('.main');    
    parent.css('border-color', 'red');
    $(this).hide();
    $('.s_done', parent).show();

});

$('.s_done').click(function(e){
    e.preventDefault();

    var parent = $(this).parents('.main');    
    parent.delay(2000).css('border-color', '');
    $(this).hide();
    $('.s_edit', parent).show();

});

Answer 1

试试这个：

$('.s_done').click(function(e){
    e.preventDefault();
    var parent = $(this).parents('.main');
    setTimeout(function() {
        parent.css('border-color', '');
    }, 2000);
    $(this).hide();
    $('.s_edit', parent).show();
});

Answer 2

如果您想使用 JQuery，请将您的函数setTimeout与该animate函数交换。animate功能更强大，可定制。

但是，您实际上并不需要自定义您的脚本。您可以像这样简单地添加一些 CSS 效果：

CSS

#box{
 position : relative;
 width : 100px;
 height : 100px;
 background-color : gray;
 border : 5px solid black;    
 -webkit-transition : border 500ms ease-out; 
 -moz-transition : border 500ms ease-out;
 -o-transition : border 500ms ease-out;
}

这是一个工作链接：边框很好地褪色