Question

您好我使用此代码切换一些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没有切换回来。有人知道我怎么能解决它？

提前致谢！

Answer 1

问题是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。

Answer 2

我知道它已被回答，但@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。

用超时切换css

2 个答案: