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）;}
）;