Задержка постепенного исчезновения в действии, пока не произойдет действие анимации

Question

Да, в принципе, у меня есть несколько заголовков.При нажатии на один из этих заголовков остальные заголовки сдвигаются вниз (для этого я использую метод animate ()).Это отлично работает.Но сразу после того, как заголовки скользят вниз, я хочу, чтобы содержимое этого заголовка отображалось непосредственно перед ним.

Приведенный ниже код работает, элементы захватываются и отображаются.У меня проблема с задержкой части $(this).find('ul').fadeIn();.В данный момент элементы постепенно исчезают во время анимации, что вызывает скачок анимации.

Любая помощь будет высоко ценится.*

Answer 1

Завершение запуска FadeIn после завершения анимации с помощью функции обратного вызова animate ()

 $(function () {

    $('ul#work-headers li ul').hide()

    $('ul#work-headers li').toggle(function () {

        var caller = $(this);
        var itemHeight = $('ul#work-headers li').find('ul').height();  

        $(this).next('ul#work-headers li').animate({ marginTop: itemHeight }, 1000, function() {
        // Animation complete.
        caller.find('ul').fadeIn();
        });



    }, function () {

        $(this).next('ul#work-headers li').animate({ marginTop: "0px" }, 1500);

        $('ul#work-headers li ul').fadeOut(1000);

    });

    });