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

Question

编辑：我已经删除了淡入淡出的新页面，因为我认为这让人感到困惑。我想让新页面淡入。

我写了一个小网站，作为一个页面运行，看起来像一个传统的网站。我基本上试图做的是具有基本要素，即。导航，徽标，页脚等，以固定到视口，并选择导航将链接到的锚点。这一切工作正常，但现在试图动画，我有一些困难。

下面是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

好吧，我已经完成了，但感谢您的所有建议。

这里是固定的Jquery位：

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

    newpage(); 

    location.reload(); 

}); 

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

Answer 2

由于JavaScript是异步的。但你不能改变页面的位置。那么第一次改变就会发生;

像这样改变你的代码。这应该工作。

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

Answer 3

添加操作之间适当的时机基本上都会在这里你做的是调用锚解决问题

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

，它会调用relavent滚动位置。使用jQuery的滚动，你可以得到平滑的结果

Answer 4

这是因为Javascript不等待FadeOut完成，因此它同时启动fadeOut和fadeIn。

你需要把淡入淡出中的回调函数，如果你想调用顺序是：（”内容）

$淡出（1000，函数（）{
[..你的函数。 ...]
$（'。contents'）。fadeIn（1000，newpage）;}
）;