延迟淡入动作直到动画动作发生

Question

基本上我有很多标题。单击其中一个标题时，其余标题会向下滑动（为此，我使用 animate() 方法）。这工作正常。但是在标题向下滑动之后，我希望该标题的内容直接显示在它之前的空间中。

下面的代码有效，正在抓取并显示项目。我遇到的问题是延迟 $(this).find('ul').fadeIn(); 部分。目前，动画正在发生时项目正在淡入，这导致动画跳跃。

任何帮助将不胜感激。

提前致谢。

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

使用 animate() 回调函数完成 FadeIn 开始动画

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

    });

    });