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

    });

    });

延迟淡入淡出操作，直到动画操作发生

1 个答案: