Callback complete function not working properly using transit js and jQuery.

Question

So

I am trying to build some navigation using jquery transit

The opens/slide down navigation is working fine. It sets the child ul to display block and then runs the animation/transition.

The issue is occurring when closing the navigation item. The ul gets hidden immediately diespite being written inside the callback. I've also added a console log of 'animation ended' once the transition has finished and this is firing at the right time, so not sure why the ul is being hidden immediately.

The jquery/js looks like this:

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;
    });

}());

And I have a fiddle here that can be tinkered with: http://jsfiddle.net/lharby/o5w8ebu8/2/

I've tried various combinations of using css visibility, jquery show() and hide() functions, but each time the ul vanishes as the transition starts (on click effectively). And I've tested Chrome, Firefox and Safari just in case there were any anomalies.

Answer 1

I believe the callback is firing at the correct time (after 1000 milliseconds) the problem is that the transition animation isn't working.

Changing to 'height': 'auto' on the shrinking transition seems to achieve the effect you are after. Though I can't say I really know why.