Jquery fadeOut 完成回调未运行，但fadeIn 回调是

Question

编辑：我已经删除了 fadeIn 中的新页面，因为我认为这让人们感到困惑。我希望新页面淡入。

我写了一个小网站，它作为一个页面运行，同时看起来像一个传统网站。我基本上想做的是拥有基本要素，即。导航、徽标、页脚等固定到视口，并选择导航将链接到的锚点。这一切都很好，但现在尝试对其进行动画处理时遇到了一些困难。

这是我正在使用的 HTML 标记：

<div id="wrap">

    <ul id="nav">

        <li><a class="start" href="#link1">Page 1</a></li>
        <li><a class="start" href="#link2">Page 2</a></li>
        <li><a class="start" href="#link3">Page 3</a></li>
        <li><a class="start" href="#link4">Page 4</a></li>

    </ul>

    <div class="contents">

    <div id="page" class="page1">

        <a class="finish" name="link1">page1</a>

    </div>

    <div id="page" class="page2">

        <a class="finish" name="link2">page2</a>

    </div>

    <div id="page" class="page3">

        <a class="finish" name="link3">page3</a>

    </div>

    <div id="page" class="page4">

        <a class="finish" name="link4">page4</a>

    </div>

    </div>

</div>

还有 CSS：

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#nav {
    position: fixed;
    width: 100%;
    margin-left: 80%;
    z-index: 999;
}

li {
    display: inline;
}

#wrap {
    width: 400%;
    height: 100%;
}

#page {
    width: 25%;
    height: 100%;
    float: left;
}

.page1 {
    background-color: blue;
}

.page2 {
    background-color: red;
}

.page3 {
    background-color: grey;
}

.page4 {
    background-color: white;
}

.finish {
    opacity: 0;
    float: right;
    width: 100%;
    height: 100%;
}

现在这一切都可以在没有 Jquery 的情况下完美运行，它直接进入链接页面。 这里的 Jquery 与 .contents 容器一起工作。

$(document).ready(function() {

        //On page load, .contents will be hidden for a clean fadIn animation. WORKING

        $('.contents').css('display', 'none');

        $('.contents').fadeIn(1000);


        //Clicking any nav link will initiate animation.

        $('.start').click(function(event) {

        //Stops default action of going straight to anchor.

        event.preventDefault();

        newLocation = this.href;

        //newpage on fadeOut activate as seen in the url bar but not returning there on fadeIn.    

        $('.contents').fadeOut(1000, newpage);

        //newpage on fadeIn is a debug to test of page will return to newlacation. Works but after animations finished.    

        $('.contents').fadeIn(1000);

    });

        function newpage() {

            window.location = newLocation;

        }

    });

我不确定还可以尝试什么。我能想到的唯一一件事是，完整的回调被 fadeOut 窃听。

Answer 1

因为 javascript 是异步的。但是你不能改变页面的位置。那么第一个变化就会发生；

像这样更改您的代码。这应该工作。

 $('.contents').fadeOut(1000, function(){
newpage();
$('.contents').fadeIn(1000, newpage); });

Answer 2

好的，我已经解决了，但感谢您的所有建议。

这是固定的 Jquery 位：

$('.contents').fadeOut(1000, function(){

    newpage();

    location.reload(); 

});

基本上需要重新加载页面才能加载页面的新部分。然后它再次运行脚本的第一部分，该部分负责淡入页面。

Answer 3

在动作之间添加适当的时间将解决问题

 $('.contents').fadeOut(800, function(){
   newpage();
   $('.contents').fadeIn(100, newpage); });
});

基本上你在这里所做的是调用锚点，它将调用相关的滚动位置。使用 jquery 滚动可以得到流畅的结果

Answer 4

这是因为 Javascript 没有等待 FadeOut 完成，所以它同时启动了 fadeOut 和 fadeIn。

如果要顺序调用，需要将FadeIn放入FadeOut的回调函数中：

$('.contents').fadeOut(1000, function(){
[..你的功能..]
$('.contents').fadeIn(1000, newpage); }
);