Using a .delay() function before .css() manipulation in jQuery

Question

I have this:

var $ul = $(this).children("ul");
$ul.animate({opacity: 0}, 1000);
$ul.delay(1000).css("display", "none")

It's for my dropdown menu, and I want it to fade off before it disappears using the display: none; CSS property. However, it appears that the .delay() cannot be used on the .css(); it doesn't work, the $ul just disappears right away.

I can't use $ul.animate({opacity: 0, display: "none"}, 1000); either.

Answer 1

The last parameter to animate is a callback that's called when the animation is complete, so you can use it like so:

$ul.animate({opacity: 0}, 1000, function() { 
    $(this).css("display", "none")
});

Answer 2

Like codeka said the callback is the correct approach here, but there are some shortcut methods built in you can use to simplify it further, .fadeOut() and .hide(), like this:

$ul.fadeOut(1000, function() {
  $(this).hide();
});