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的回调函数中：

$（＆＃39; .contents＆＃39;）。fadeOut（1000，function（）{
[..你的功能..]
$（＆＃39; .contents＆＃39;）。fadeIn（1000，newpage）; }））;

Jquery fadeOut完全回调没有运行但是fadeIn回调是

4 个答案: