delay, setTimeout - how to do 2 things delayed on click?

Question

it should be so easy but i'm blind ;(

What i want to do is: I click on a button. I do some clickstuff, but i also want a blur-transition-css-effekt on another element. so I add a class und then with delay (because this is a nice effect) another class which does a blur-effekt. But now i want so remove the transition-class. This should happen WHEN the blur class is added.. any ideas? This code above needs to be completed with removeClass('.transition') ...

$('#clicky').click(function(e){

$("#click").addClass("transition").delay(1000).queue(function(){
    $('#blurmewithtransition').addClass("blur").dequeue();

});

});

Answer 1

you can do it with same .queue function.

$('#clicky').click(function(e){

    $("#clicky")
    .queue(function(){
        $(this).addClass("transition").dequeue();
    })
    .delay(1000)
    .queue(function(){
        $(this).addClass("blur").dequeue();
    })
    .delay(1000)
    .queue(function(){
        $(this).removeClass('transition').dequeue();
        $(this).removeClass('blur').dequeue();
    });

});

inspect html element and you can see how css classes are added and removed, I added delay between add/remove css classes for better look and check.

DEMO