首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用transit和jQuery回调完全函数不能正常工作。

使用transit和jQuery回调完全函数不能正常工作。
EN

Stack Overflow用户
提问于 2015-01-09 15:17:15
回答 1查看 568关注 0票数 1

所以

我正在尝试使用jquery中转构建一些导航

打开/滑下导航运行良好。它将子进程ul设置为显示块,然后运行动画/转换。

关闭导航项时会发生此问题。ul立即被隐藏在回调中。我还添加了一个控制台日志‘动画结束’,一旦过渡结束,这是在正确的时间触发,所以不确定为什么ul被立即隐藏。

jquery/js看起来如下所示:

代码语言:javascript
复制
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 ()和隐藏()函数,但是每次转换开始时ul都消失了(点击有效)。我已经测试了Chrome,Firefox和Safari,以防出现异常。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-14 09:26:31

我相信回调是在正确的时间( 1000毫秒后)触发的,问题是转换动画不起作用。

在收缩的过渡中,改变为'height': 'auto'似乎达到了您所追求的效果。虽然我不能说我真的知道为什么。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27863680

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档