Jquery fadeOut complete callback not running but the fadeIn callback is

Question

EDIT: I have removed the newpage in fadeIn as I think it was confusing people. I want the newpage to fadeIn.

I've written a little site that runs as one page whilst looking like a traditional site. What I basically was trying to do was have the essential elements ie. nav, logo, footer etc. to be fixed to the viewport and have a selection of anchor points that the nav will link to. This all works fine but now trying to animate it I am having some difficulties.

Here is the HTML markup I'm working with:

<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>

And the 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%;
}

Now this all works perfectly without Jquery, it just goes straight to the linked page. The Jquery here is working soley with the .contents container.

$(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;

        }

    });

I'm not sure what else to try. The only thing that I can think of is that the complete callback is bugged for fadeOut.

Answer 1

since javascript is asynchronous. But you cant change location of page. then the first change will happen;

change your code like this. this should work.

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

Answer 2

Okay so I've worked it out but thanks for all you advice.

Here's the fixed Jquery bit:

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

    newpage();

    location.reload(); 

});

Basically the page needed to be reload in order to load the new part of the page. It then runs the first part of the script again which is responsible for fading in the the page.

Answer 3

adding proper timing between actions will solve the problem

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

basically here what you have doing is calling the anchor and it will call the relavent scroll position. using jquery scroll you can get smooth results

Answer 4

That's because Javascript is not waiting for FadeOut to finish, so it starts both fadeOut and fadeIn at the same time.

you need to put FadeIn in the callback function of FadeOut if you want to sequentially call them :

$('.contents').fadeOut(1000, function(){
[.. your functions .. ]
$('.contents').fadeIn(1000, newpage); }
);