1

私はこの数時間この問題に取り組んできました、そしてそれは私の小さな脳を混乱させました。

何が起こっているのかというと、jQueryアニメーションアニメーションがアニメーション中に停止しているように見えるため、コールバックが発生しなくなります。

問題は、これが断続的かつランダムに発生するため、コードで問題を特定できないことです。およそ7回に1回発生するようです。それでも、それは最初または10回後に発生する可能性があります。

この場合、jsfiddleはサイトの他のセクションに非常に密接にリンクされているため、実際にはまとめることができません。代わりに、ここにリンクを残して、関連するセクションをポイントしたいと思います。問題のサイトへのリンクは次のとおりです。以下に示すコードは219行目から始まります。firebugコンソールを見ると、コードが実行されるときに作成したログを確認できます。leftまた、問題が発生したときに、cssプロパティが完全にアニメーション化されていないこともわかります。

以下は、問題を示す画像です。cssleftプロパティが664pxにないことに注意してください（問題が発生しなかった場合はそうなります）。

ここに画像の説明を入力してください

以下は関連するコードです。

    $(".close").live("click", function() {

        console.log("--------------------");
        console.log("Close button has been clicked");

        var toMove = $(this).parent().attr("class").replace("infoBox ", "");

        $(this)
            .parent()
            .fadeOut("fast");

        console.log("Setting #" + toMove + " back to default position");

        $("#" + toMove)
            .removeClass("active")
            .addClass("ready")
            .delay(100)
            .animate({
                left: $("#" + toMove).attr("data-left").replace("px", "")
            }, 200, function() {
                console.log("Animate has finished. Now checking all images are in the right place");
                resetAll();
                $(".close").remove();
        });
    });

私の質問に何か問題がありますか？私に知らせてください、それがstackoverflowの厳格な基準を満たすように修正+編集することを嬉しく思います！

関連している

.animate（）のコールバックにバグがありますか？

4

1 に答える 1

2

アイコンに中間状態を追加してみてください。[閉じる]ボタンをクリックするとすぐに、クラスは「アクティブ」から「準備完了」に変わります。たとえば、「moving」を追加し、その状態が「moving」である間は他の関数を呼び出さないようにします。初期位置に戻ったら、クラスを再び「準備完了」に設定できます。

$("#" + toMove)
        .removeClass("active")
        .addClass("moving")
        .delay(100)
        .animate({
            left: $("#" + toMove).attr("data-left").replace("px", "")
        }, 200, function() {
            console.log("Animate has finished. Now checking all images are in the right place");
            resetAll();
            $(".close").remove();
    })
        .removeClass("moving")
        .addClass("ready");
于 2012-07-08T15:05:10.690 に答える