Question

I have this div I want to hide (display:none) after it fades out, so I enter this:

$('.element').click(function(){
    $(this).animate({opacity:"0"},{duration:200});
    $(this).delay(200).css('display','none');
});

And I suddenly remember that delay()s don’t work for css. I used to have a little setTimeout fix for this lying around but can’t find it anywhere so I tried random stuff like this:

$('.element').click(function(){
    $(this).animate({opacity:"0"},{duration:200});
});
$('.element').click(function(){
    setTimeout(function(){
        $(this).css('display','none');
    },200);
});

Still doesn’t work. Can someone help me out here please?

Answer 1

jQuery’s .animate() has a callback feature, you can send an anonymous function to be executed once the animation is done:

$(this).animate({opacity:"0"},{duration:200}, function(){
   $(this).css('display','none');
});

source: jQuery animate