jquery首先滑出，完成后进入单击的页面

又是我。滑入像一种魅力。但是我想扩展脚本。我希望框滑出，恩，当这完成后，然后加载点击的页面

滑出部分工作正常，但页面总是加载得很快。我尝试了延迟、暂停和更多的东西，但由于我是一个jquerynoob，我仍然无法让它在正确的时间工作，或者我确信我编写的代码是正确的

在最新的框滑出屏幕后调用window.location是很重要的。这是因为页面可以包含可变数量的框

请给我一些提示和建议

下面是我的代码：

Jquery（在Sohnee建议的更改之后）

以下是指向JSFIDLE的链接和代码的当前状态：

编辑：页面不会加载，动画也不会完成。这就是我要返回的错误

未捕获的TypeError:对象#的属性“location”不是函数

编辑2:

$("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;
    });

大声思考：

似乎删除return-false规则会使脚本再次运行，但是页面会提前到达被调用的页面。Return 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;
    });

---

原始答案：您可以通过将位置更改移动到动画上的回调来实现这一点

基于

• 想要动画一系列的框，并在最后一个加载一个新的页面

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

---

感谢您的快速响应！我试过回电话，但现在我发现我完全错了！不幸的是，动画完成后页面没有加载，这可能是一个错误。这是我现在使用的代码：$（“a”）。单击（function（）{var linkToGo=$（This）.attr（“href”）；$（.slidingbox”）。每个（function（index）{$（This）.delay（index*50）。设置动画（{left:'-=940px），不透明度：“0.9”}，500，函数（）{document.location（linkToGo）；}）；返回false；}）@Rick更改您的问题以包含此信息。我已更新我的答案以更正此问题-这是我的错误！我还添加了一些代码，只处理最后一个框上的重定向。你有一个打字错误，之后它工作得很出色！我将完成的代码添加到我的问题中。谢谢！