jQuery:特效完成后执行

Question

我有一个顶部导航栏，当你点击一个项目时，一个超级菜单滑下来，如果你再次点击它，超级菜单又滑了起来。

有时，我有一些元素(链接和段落)的z索引高于mengamenus，所以当megamenus滑下时，它们会出现在megamenu的顶部。我用下面的代码解决了这个问题。

然而，通过解决这个问题，出现了另一个问题，这就是我需要帮助的地方：

当超级菜单向上滑动时，元素的z索引立即变为1，因此当超级菜单重新向上滑动时，元素出现在超级菜单的顶部。

有没有一种方法可以在巨型地震结束后改变这些元素的z指数呢？

到目前为止，我的代码如下：

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

Answer 2

.slideUp()使用callback...you可以在那里的函数中运行z-index更改，如下所示：

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

Answer 3

您可以使用setTimeout()函数，然后检查某个类。如果该类存在，则可以使用addClass或toggleClass函数添加新的z索引。