[英]Callback complete function not working properly using transit js and jQuery.
所以
我正在尝试使用jQuery Transit构建一些导航
打开/向下滑动导航功能正常。 它将子ul设置为显示块,然后运行动画/过渡。
关闭导航项时出现问题。 ul被隐藏在回调中而立即被隐藏。 过渡完成后,我还添加了一个“动画结束”的控制台日志,并且该日志在正确的时间触发,因此不确定ul为什么立即被隐藏。
jQuery / js看起来像这样:
var dropDown = (function(){
var mainNav = $('#mainNav');
var navA = mainNav.find('li a');
var navUL = mainNav.find('ul');
var iconAll = mainNav.find('i');
navUL.transition({
'max-height': '0px',
'height': '0px',
'overflow': 'hidden',
'display': 'none'
});
navA.on('click',function(){
var nextUL = $(this).next();
var icon = $(this).find('i');
var nextULHidden = nextUL.css('display') === 'none';
if(nextULHidden) {
nextUL.css('display','block').transition({
duration: 1000,
'height': 'auto',
'max-height': '1000px',
easing: 'ease-in'
});
$(this).addClass('active');
icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
console.log('hidden');
}else if(!nextULHidden){
nextUL.transition({
duration: 1000,
'height': '0px',
'max-height': '0px',
easing: 'ease-in',
complete: function(){
nextUL.css('display','none');
console.log('animation ended');
}
});
$(this).removeClass('active');
icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
console.log('visible');
}else{
console.log('some error');
}
return false;
});
}());
我在这里可以摆弄一个小提琴: http : //jsfiddle.net/lharby/o5w8ebu8/2/
我已经尝试过使用css可见性,jquery show()和hide()函数的各种组合,但是每次ul随着过渡开始而消失时(有效单击)。 而且我已经测试了Chrome,Firefox和Safari,以防万一出现任何异常情况。
我认为回调函数会在正确的时间(1000毫秒后)触发,问题是过渡动画无法正常工作。
更改为'height': 'auto'
在缩小的过渡中, 'height': 'auto'
似乎可以达到您所追求的效果。 虽然我不能说我真的知道为什么。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.