1

又是我。滑入就像一个魅力。但我想扩展脚本。我希望这些框滑出，然后在完成后加载单击的页面。

滑出部分运行良好，但页面总是加载得很快。我尝试了延迟，暂停等等，但由于我是一个 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

编辑：页面未加载，动画未完成。这是我要回来的错误

未捕获的类型错误：对象# 的属性“位置”不是函数

编辑2：

把想法大声说出来：

似乎删除 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;
    });
4

1 回答 1

2

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

新答案基于

  • 想要为一系列盒子制作动画，并在最后一个盒子上加载一个新页面......

    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; 
                }
            });
});
于 2010-08-17T12:12:49.553 回答