jQuery在淡入之前淡出

Question

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

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

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

这是断章取义的；请随时在网站上View Source。

Answer 1

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

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

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