Delay CSS in jQuery

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?

Rodik · Accepted Answer · 2012-08-02 12:22:30Z

4

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

answered Aug 2, 2012 at 12:22

Rodik

4,10228 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krishna sagar · Accepted Answer · 2012-08-02 12:26:25Z

1

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');

});

answered Aug 2, 2012 at 12:26

Krishna sagar

1702 silver badges3 bronze badges

Comments

Barlas Apaydin · Accepted Answer · 2012-08-02 12:43:18Z

1

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

edited Aug 2, 2012 at 12:43

answered Aug 2, 2012 at 12:22

Barlas Apaydin

7,35511 gold badges60 silver badges88 bronze badges

1 Comment

Curtis Over a year ago

Probably no need to delay the css anymore. I assume this was just so that its ran after the animate

RubbleFord · Accepted Answer · 2012-08-02 12:23:27Z

0

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

answered Aug 2, 2012 at 12:23

RubbleFord

7,6669 gold badges55 silver badges80 bronze badges

Collectives™ on Stack Overflow

Delay CSS in jQuery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related