Question

我目前正在制作Counter，其中显示了我的主页的一些统计信息。这是我正在使用的脚本：

$('.count-1, .count-2, .count-3, .count-4').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 5000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

现在我只想运行这个动画，如果计数器出现在屏幕上......所以我得到了这个脚本：

$(document).ready(function () {
    var windowHeight = $(window).height(),
        gridTop = windowHeight * -10,
        gridBottom = windowHeight * .9;
    $(window).on('scroll', function () {
        $('.class').each(function () {
            var thisTop = $(this).offset().top - $(window).scrollTop();
            if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                // run this if .class gets in viewpoint
            } else {
                // run this else 
            }
        });
    });
});

所以我将两个脚本放在一起：

$(document).ready(function () {
    var windowHeight = $(window).height(),
        gridTop = windowHeight * -10,
        gridBottom = windowHeight * .9;
    $(window).on('scroll', function () {
        $('.count-1, .count-2, .count-3, .count-4').each(function () {
            var thisTop = $(this).offset().top - $(window).scrollTop();
            if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                $(this).prop('Counter',0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 5000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            } else {

            }
        });
    });
});

现在，如果我向下滚动页面，计数器会在屏幕上显示时开始运行（这是我想要的那样）但是当计数器完成时，计数器开始向后计数直至.count-1，{ {1}} ...位于.count-2。即使我再次向上和向下滚动......计数器仍然保持在1。有时，1会更改为1或2，但会再次快速降至3。

以下是片段：

$(document).ready(function () {
    var windowHeight = $(window).height(),
        gridTop = windowHeight * -10,
        gridBottom = windowHeight * .9;
    $(window).on('scroll', function () {
        $('.count-1, .count-2, .count-3, .count-4').each(function () {
            var thisTop = $(this).offset().top - $(window).scrollTop();
            if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
                $(this).prop('Counter',0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 5000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            } else {

            }
        });
    });
});

/* just for some scrolling */
#container {
  margin-top: 1000px;
  margin-bottom: 50px;  
}

错误在哪里？

一旦完成，就阻止Javascript向后运行

0 个答案: