JQuery сначала выскользнуть, и когда закончил, попал на страницу, на которую нажали

Question

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

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

Импортируется, что window.location вызывается после того, как последнее окно выскользнет за пределы экрана. Это потому, что страница может содержать переменное количество блоков.

Пожалуйста, несколько советов и советов.

Ниже мой код:

Jquery (после изменений, предложенных 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; 
   });

Вот ссылка на jsFiddle и текущий статус кода: jsFiddle

Редактировать: страница не загружается, и анимация не заканчивается. Это ошибка, которую я получаю обратно

Uncaught TypeError: Свойство 'location' объекта # не является функцией

Редактировать 2:

Мысли вслух:

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

Окончательный код:

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

Оригинальный ответ: Вы можете добиться этого, переместив изменение местоположения в обратный вызов анимации ...

Новый ответ на основе

• Желание анимировать серию ящиков и на последнем загрузить новую страницу ...

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