jQuery 在淡入之前淡出

发布于 2024-10-01 01:47:51 字数 470 浏览 12 评论 0原文

我正在制作我的作品集，完全基于 javascript。 http://portfolio.theadamgaskins.com/Portfolio/

我的问题是，当您单击其中之一时导航按钮时，新页面会在其他页面淡出的同时淡入。当前页面应该在新页面淡入之前淡出。这是我正在使用的代码

    $("#homeButton").click(function()
    {
        $('.page[id!="homePage"]').fadeOut('400', function()
        {
            $("#homePage").fadeIn('400');
        });
    });

：请随时在网站上查看源代码。

原文

I am making my portfolio, totally javascript based. http://portfolio.theadamgaskins.com/Portfolio/

My problem, is when you click one of the navigation buttons, the new page fades in at the same time that the other page fades out. The current page should fade out before the new page fades in. Here's the code I'm using:

    $("#homeButton").click(function()
    {
        $('.page[id!="homePage"]').fadeOut('400', function()
        {
            $("#homePage").fadeIn('400');
        });
    });

This is out of context; feel free to View Source on the site.

分享到QQ

分享到微博

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

发布评论

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

冷心人i 2024-10-08 01:47:51

发生这种情况是因为某些元素已经隐藏，因此它们的回调立即执行...导致同步动画。要解决此问题，请将 :visible 添加到所需元素的选择器中制作动画，如下所示：

$("#homeButton").click(function() {
    $('.page[id!="homePage"]:visible').fadeOut('400', function() {
        $("#homePage").fadeIn('400');
    });
});

这样您就不会将动画或有问题的回调附加到已经隐藏的元素。

This happens because some of the elements are already hidden, so their callbacks execute immediately...causing your simultaneous animation. To remedy this add :visible to your selector of elements you want to animate, like this:

$("#homeButton").click(function() {
    $('.page[id!="homePage"]:visible').fadeOut('400', function() {
        $("#homePage").fadeIn('400');
    });
});

This way you're not attaching an animation or problematic callback to the elements that are already hidden.

回复收藏 0 原文

~没有更多了~