jquery first slide out, and when finished got to the clicked page

Question

Me again. The sliding in works like a charm. But I want to extend the script. I want that the boxes slide out, en when that's finished then load the clicked page.

The sliding out part is working good, but the page always loads to fast. I tried stuff with delay, pause, and much more, but since I'm a jquery noob I still can't get it to work on the right timing, or am I sure I coded it right.

It's import that the window.location is called after the latest box slides out of the screen. This is because an page can contain a variable amount of boxes.

Please some tips and advice.

Below is my code:

Jquery(After changes suggested by Sohnee)

 $("a").click(function(){
       var linkToGo = $(this).attr("href");
       $(".slidingbox").each(function(index){ $(this).delay(index * 50) .animate({left: "-=940px", opacity: "0.9"}, 500, function () {document.location(linkToGo);}); });
       return false; 
   });

Here is the link to the jsFiddle and the current status of the code: jsFiddle

Edit: The page doesn't load, and the animations doesn't finishes. This is the error I'm getting back

Uncaught TypeError: Property 'location' of object # is not a function

Edit 2:

Thinking out loud:

It seems that removing the return false rule makes the script function again, but again, the page goes way to early to the called page. Return false is making sure that the default action for the link isn't working. So all of that makes sense. If we replace the location rule for an alert we see that the alert is called continuously and the script gets stuck.

Final code used:

$("a").click(function(){
        var linkToGo = $(this).attr("href");

        var slidingBoxes = $(".slidingbox");
        var slidingBoxCount = slidingBoxes.length;
        var animationCount = 0;

        $(".slidingbox").each(function(index){
            $(this).delay(index * 50)
                .animate({left: "-=940px", opacity: "0.9"}, 250, 
                    function () { 
                        animationCount++;
                        if (animationCount == slidingBoxCount) {
                            document.location = linkToGo; 
                        }
                    });
        });
        return false;
    });

Answer 1

Original answer: You can achieve this be moving the location change into a callback on the animation...

New answer based on

• Wanting to animate a series of boxes and on the final one load a new page...

  var sildingBoxes = $(".slidingbox");
  var slidingBoxCount = slidingBoxes.length;
  var animationCount = 0;
  
  $(".slidingbox").each(function(index){
      $(this).delay(index * 50)
          .animate({left: "-=940px", opacity: "0.9"}, 500, 
              function () { 
                  animationCount++;
                  if (animationCount == slidingBoxCount) {
                      document.location = linkToGo; 
                  }
              });
  });