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

Posted 2023-05-08

【中文标题】延迟淡入动作直到动画动作发生

【英文标题】：Delay the fade In action until the Animation action has occurred

【发布时间】：2011-11-22 21:20:39

【问题描述】：

基本上我有很多标题。单击其中一个标题时，其余标题会向下滑动（为此，我使用 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);

);

);

【参考方案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);

    );

    );

【讨论】：

这正是我正在寻找的，谢谢，非常感谢。但是还有一个问题，既然 fadeIn 在不同的函数中，我的 THIS 选择器将无法与我单击的标题一起使用。如何在我现在单击的标题中定位 UL？目前，它正在淡入标题动画的 UL 中。 （下面的标题）

别担心，我已经解决了： $(this).prev('ul#work-headers li').find('ul').fadeIn(3000); ..再次感谢！