與超時

Question

切換CSS你好，我使用此代碼爲撥動一些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

問題是setTimeout函數中的this不是你所期望的。你需要在外面保留一個參考：

$('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。