Question

Right basically I have a number of headers. When one of those headers is clicked, the rest of the headers slide down (for this I am using the animate() method). This works fine. But straight after the headers slide down, I want the contents of that header to display in the space directly before it.

The code below works, the items are being grabbed and displayed. The problem I am having, is delaying the $(this).find('ul').fadeIn(); part. At the moment, the items are fading in while the animation is happening which is causing the animation to jump.

Any help would be much appreciated.

Thanks in Advance.

$(function () {

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

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

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

    $(this).next('ul#work-headers li').animate({ marginTop: itemHeight }, 1000);

    $(this).find('ul').fadeIn();

}, function () {

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

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

});

});

Answer 1

Make the FadeIn start on animation complete, by using the animate() callback function

 $(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);

    });

    });