Question

Hello I use this code for toggle some css properties:

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

I added a timeout but now the css doesnt toggle back. Somebody knows how i can fixe it?

Thanks in advance!

Answer 1

The problem is that this inside the setTimeout function is not what you’re expecting. You’ll need to keep a reference to it outside:

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

Here’s a working example.