Question

我只想播放一次计数动画。但是每次滚动时都会运行此代码。

$(function () {
    var oTop = $('#counter').offset().top - window.innerHeight;
    $(window).scroll(function () {

        var pTop = $('body').scrollTop();

        if (pTop > oTop) {
            start_count();
        }
    });
});

function start_count() {
    (function ($) {
        $.fn.countTo = function (options) {
            // merge the default plugin settings with the custom options
            options = $.extend({}, $.fn.countTo.defaults, options || {});

            // how many times to update the value, and how much to increment the value on each update
            var loops = Math.ceil(options.speed / options.refreshInterval),
                increment = (options.to - options.from) / loops;

            return $(this).each(function () {
                var _this = this,
                    loopCount = 0,
                    value = options.from,
                    interval = setInterval(updateTimer, options.refreshInterval);

                function updateTimer() {
                    value += increment;
                    loopCount++;
                    $(_this).html(value.toFixed(options.decimals));

                    if (typeof (options.onUpdate) == 'function') {
                        options.onUpdate.call(_this, value);
                    }

                    if (loopCount >= loops) {
                        clearInterval(interval);
                        value = options.to;

                        if (typeof (options.onComplete) == 'function') {
                            options.onComplete.call(_this, value);
                        }
                    }
                }
            });
        };

        $.fn.countTo.defaults = {
            from: 0, // the number the element should start at
            to: 100, // the number the element should end at
            speed: 1000, // how long it should take to count between the target numbers
            refreshInterval: 100, // how often the element should be updated
            decimals: 0, // the number of decimal places to show
            onUpdate: null, // callback method for every time the element is updated,
            onComplete: null, // callback method for when the element finishes updating
        };
    })(jQuery);

    jQuery(function ($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 5000,
            refreshInterval: 50,
            onComplete: function (value) {
                console.debug(this);
            }
        });
    });
}

Answer 1

简单

使用变量

var count =1;

$(function () {
    var oTop = $('#counter').offset().top - window.innerHeight;
    $(window).scroll(function () {
       if(count)
       {   
        var pTop = $('body').scrollTop();

        if (pTop > oTop) {
            start_count();
        }
       count=0;           
      }
    });
});

Jquery动画仅滚动一次

1 个答案: