jQuery: execute something after an effect is finished

I have a top nav bar, when you click on an item a megamenu slides down, if you click on it again, the megamenu slides back up.

Sometimes, I have elements (links and paragraphs) whose z-index is higher than the mengamenus, so when the megamenus slide down, they appear on top of the megamenu. I solved this issue with the code below.

However, by solving this issue, another one came up and this is where I need help:

When the megamenus are sliding back up, the z-index of the elements is immediately changed back to 1, thus the elements appear on top of the megamenu while the megamenu is sliding back up.

Is there a way to have the action of changing the z-index of those elements AFTER the megamenus have finished sliding back up?

Here's my code so far:

$('.click-menu h6 span').click(function() {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        $(this).parent().next().slideUp('fast');
        $('.generic-box a, .generic-box p').css('z-index', '1');
    } else {
  开发者_运维百科      $('.click-menu h6 span').removeClass('selected');
        $(this).addClass('selected');
        $('.click-menu div').slideUp('fast');
        $(this).parent().next().slideDown('fast');
        $('.radio-btns-wrapper-wjs').slideUp('fast');
        $('.generic-box a, .generic-box p').css('z-index', '0');
    }
});

Any help would be greatly appreciated.

---

Both slideUp and slideDown accept optional callback parameters that execute once the animations are finished:

$('.click-menu h6 span').click(function(){
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        $(this).parent().next().slideUp('fast', function() {
            $('.generic-box a, .generic-box p').css('z-index','1');     
        });
    } else {
        $('.click-menu h6 span').removeClass('selected');
        $(this).addClass('selected');
        $('.click-menu div').slideUp('fast');
        $(this).parent().next().slideDown('fast');
        $('.radio-btns-wrapper-wjs').slideUp('fast', function() {
            $('.generic-box a, .generic-box p').css('z-index','0');  
        });   
    }
});

---

.slideUp() takes a callback...you can run the z-index changes in a function there, like this:

$(this).parent().next().slideUp('fast', function() {
  $('.generic-box a, .generic-box p').css('z-index','1'); 
});

---

you can use the setTimeout() function then check for a certain class. If the class exists you can use an addClass or toggleClass function to add a new z-index.

---

Working code based on Jeff's code and Nick Craver's suggestion:

$(function(){
//Megamenus     
$('.click-menu h6 span').click(function(){
    if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $(this).parent().next().slideUp('', function() {
        $('.generic-box a, .generic-box p').css('z-index','1');
});

} else {
    $('.click-menu h6 span').removeClass('selected');       
    $(this).addClass('selected');
    $('.click-menu div').slideUp('fast');
    $(this).parent().next().slideDown('fast');
    $('.generic-box a, .generic-box p').css('z-index','0');
    $('.radio-btns-wrapper-wjs').slideUp('');
    }
  });
});

I had to remove the z-index:0 out of the function since '.radio-btns-wrapper-wjs' wasn't the object injecting the z-index:0.

Thanks again :)