3

2 つの CSS アニメーションを表示するために、ユーザーが上下にスクロールするときにクラスを追加しようとしています。

スクロール ダウン アニメーションのみを使用している場合はうまく機能しますが、スクロール アップ アニメーションとスクロール ダウン アニメーションの両方を使用している場合は一貫性がありません。

アニメーションを連続して複数回起動するのに問題があります。インスクロールダウン一時停止、スクロールダウン一時停止、スクロールアップ一時停止、スクロールアップ一時停止として。

問題をよりよく示すための jsFiddle を次に示します。

そしてコード-

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > previousScroll) {
            //down scroll code
            $("#repel").removeClass("climb");
            $("#repel").addClass("repel").delay(1150).queue(function (next) {
                $(this).removeClass("repel");
                next();
            });
        } else {
            // upscroll code
            $("#repel").removeClass("repel");
            $("#repel").addClass("climb").delay(1000).queue(function (next) {
                $(this).removeClass("climb");
                next();
            });
        }
        previousScroll = currentScroll;
    });
}());
4

1 に答える 1

3

私はそれを考え出した...

アニメーションの削除方法を変更する必要がありました。遅延とキューを使用するのではなく、アニメーションの終了を検出して削除しました。

実施例

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > previousScroll) {
            //down scroll code
            $("#repel").addClass("repel");
            $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
                $('#repel').removeClass('repel');
            });

        } else {
            // upscroll code
            $("#repel").addClass("climb");
            $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
                $('#repel').removeClass('climb');
            });
        }
        previousScroll = currentScroll;
    });
}());
于 2013-07-03T18:40:56.310 に答える