CODEWITHSUNDEEP
jquerycsssettimeoutdelay
Ray Lee
Ray Lee

Reputation: 319

Delay CSS in jQuery

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?

Upvotes: 3

Views: 1657

Answers (4)

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

Use animate callback function, that function will initualise when animation complete.

Structure is like this = .animate( properties [, duration] [, easing] [, complete] )

Example:

$('.element').click(function(){
    $(this).animate({opacity:"0"},200,function() {//use callback here
       $(this).css('display','none');
    });
});

Upvotes: 1

Krishna sagar
Krishna sagar

Reputation: 170

A more Elegant way of doing it is by specifying a callBack function to run after the animation.

Eg:

$(this).animate({opacity:"0"},200,function(){

     $(this).css('display','none');

});

Upvotes: 1

RubbleFord
RubbleFord

Reputation: 7646

$('.element').fadeOut('slow', function() {
    // Animation complete. do something here if you want
 });

Upvotes: 0

Rodik
Rodik

Reputation: 4092

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

Upvotes: 4

Related Questions