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

发布于 2024-12-05 20:14:06 字数 689 浏览 2 评论 0原文

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

});

});

原文

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

});

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薄荷→糖丶微凉 2024-12-12 20:14:06

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

    });

    });

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

    });

    });

回复收藏 0 原文

~没有更多了~