用超时切换css

时间:2011-11-11 11:37:33

标签: jquery toggle

您好我使用此代码切换一些css属性:

$(document).ready(function() {
    $('li#last').toggle(function(){
        $(this).css({"border-bottom": "1px solid #CDCDCD", "-webkit-border-radius": "0px", "border-radius": "0px"});
    }, function(){
        setTimeout(function() {
            $(this).css({"border-bottom": "0px", "-webkit-border-radius": "0px 0px 5px 5px", "border-radius": "0px 0px 5px 5px"});
        }, 200);
    });
});

我添加了超时但现在css没有切换回来。有人知道我怎么能解决它?

提前致谢!

2 个答案:

答案 0 :(得分:2)

问题是this函数中的setTimeout不是您所期望的。你需要在外面保留对它的引用:

$('li#last').toggle(function(){
    $(this).css({"border-bottom": "1px solid #CDCDCD", "-webkit-border-radius": "0px", "border-radius": "0px"});
}, function(){
    var li = this;
    setTimeout(function() {
        $(li).css({"border-bottom": "0px", "-webkit-border-radius": "0px 0px 5px 5px", "border-radius": "0px 0px 5px 5px"});
    }, 200);
});

这是working example

答案 1 :(得分:0)

我知道它已被回答,但@rickyduck的意图是:

$("#example").toggle(function() {
    $(this).css("background-color", "#ff0000")
}, function() {
    $(this).delay(500).queue(function(next){ 
        $(this).css("background-color", "#000") 
        next()
    })
})

这是working example

这是why the .delay() by itself doesn't work