jQuery:在效果完成后执行某些操作
问题描述:
我有一个*导航栏,当您单击一个megamenu滑下的项目时,如果再次单击它,megamenu会滑回。jQuery:在效果完成后执行某些操作
有时,我有元素(链接和段落),其z指数高于mengamenus,所以当megamenus滑落时,它们出现在megamenu的顶部。我用下面的代码解决了这个问题。
然而,解决这一问题,另一个人来了,这是我需要的帮助:
当megamenus都滑回了,元素的z-index的立即改回1,从而元素出现在megamenu的顶部,而megamenu滑回去。
有没有办法改变这些元素的z-index行为后megamenus完成滑动备份?
这里是我到目前为止的代码:
$('.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');
}
});
任何帮助将不胜感激。
答
两个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');
});
}
});
答
.slideUp()
采用了回调...你可以运行在一个功能z-index
变化有,像这样:
$(this).parent().next().slideUp('fast', function() {
$('.generic-box a, .generic-box p').css('z-index','1');
});
答
你可以使用setTimeout()函数然后检查某个类。如果该类存在,则可以使用addClass或toggleClass函数添加新的z-index。根据杰夫的代码和尼克Craver的建议
答
工作代码:
$(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('');
}
});
});
我不得不删除的z-index:0出来的功能,因为” .radio-btns - 包装 - WJS'不注入z-index的对象:0。
再次感谢:)
谢谢杰夫。我的代码提示告诉我有一个语法错误? ($(this).hasClass('selected')){(this).removeClass()。(function){('。click-menu h6 span')。click(function(){ if 'selected'); $(this).parent()。next()。slideUp('fast',function(){'。generic-box a,.generic-box p').css(' ('。click-menu h6 span')。removeClass('selected'); $(this).addClass('selected') ; $('。click-menu div')。slideUp('fast'); $(this).parent()。next()。slideDown('fast'); $('。radio-btns- (''fast',function(){'。generic-box a,.generic-box p').css('z-index','0');('wrapper-wjs' 10}); }); – 2010-12-02 21:55:20