JQuery fadeOut полный callback не работает, но обратный вызов fadeIn равен

Question

EDIT: Я удалил новую страницу в fadeIn, поскольку я думаю, что это путало людей. Я хочу, чтобы новая страница fadeIn.

Я написал небольшой сайт, который работает как одна страница, выглядя как традиционный сайт. То, что я в основном пытался сделать, это иметь существенные элементы, т.е. nav, логотип, нижний колонтитул и т. д., которые должны быть привязаны к окну просмотра и иметь выбор опорных точек, к которым будет привязан навигатор. Все это прекрасно работает, но теперь, пытаясь оживить его, у меня возникают некоторые трудности.

Вот 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 здесь работает soley с контейнером .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 одновременно.

вам нужно поставить FadeIn в функции обратного вызова FADEOUT, если вы хотите, чтобы последовательно называть их: (».) Содержимое

$ FADEOUT (1000, функция() {
[.. ваши функции. ..]
$ ('. Contents'). FadeIn (1000, новая страница);}
);