1

もう一度私。スライドインは魅力のように機能します。しかし、私はスクリプトを拡張したいと思います。ボックスをスライドさせて、終了したらクリックしたページをロードします。

スライドアウト部分は正常に機能していますが、ページの読み込みは常に高速です。遅延や一時停止などを試してみましたが、私はjquery noobなので、それでも正しいタイミングで動作させることができません。または、正しくコーディングしたと確信しています。

最新のボックスが画面からスライドした後に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：

考えが口に出ていた：

return 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;
    });
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 に答える