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>

JQUERY：

$('.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;
}

这是一个有用的链接：Border nicely fading

几秒钟后点击删除或添加CSS样式

2 个答案: