0

どうすれば削除または追加でき.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>

Jクエリ:

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

});
4

2 に答える 2

2

これを試して：

$('.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();
});
于 2013-07-12T10:08:46.603 に答える
0

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;
}

ここに作業リンクがあります:

于 2013-07-12T10:22:52.130 に答える