jQuery:在效果完成后执行某些操作

Question

我有一个顶部导航栏,当你点击一个项目时,megamenu向下滑动,如果你再次点击它,megamenu会向上滑动.

有时,我有z-index高于mengamenus的元素(链接和段落),所以当megamenus向下滑动时,它们出现在megamenu的顶部.我用下面的代码解决了这个问题.

但是,通过解决这个问题,又出现了另一个问题,这是我需要帮助的地方:

当megamenus向后滑动时,元素的z-index立即变回1,因此元素出现在megamenu的顶部,而megamenu向后滑动.

有没有办法在megamenus完成滑动后更改这些元素的z-index？

到目前为止,这是我的代码:

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

任何帮助将不胜感激.

Answer 1

双方slideUp并slideDown同意,执行一次动画完成后可选的回调参数:

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