Question

使用：jQuery.appear.js和countUp.js插件

当用户滚动时我遇到问题，事件不断被触发。我也试过没有jQuery.appear插件并使用on.scroll(function(){});但我得到了相同的结果。动画完成之前的任何滚动事件都会触发动画并导致动画失灵。我尝试了$(window).unbind('scroll');，但是这会破坏任何其他滚动动画。

var $element = $('.element');
$element.appear();
$(document.body).on('appear', '.element', function () {
    var $this = $(this),
        countTo = $this.attr('data-count');

    $({countNum: $this.text()}).animate({
            countNum: countTo
        },
        {
            duration: 1000,
            easing: 'linear',
            step: function () {
                $this.text(Math.floor(this.countNum));
            },
            complete: function () {
                $this.text(this.countNum);
            }
        }
    );
});

如何在动画仍在进行时阻止滚动事件触发动画？

结帐https://jsfiddle.net/efqhgg5L/。

时，如果在数字仍在滴答时继续滚动数字，则动画将无法完成。

Answer 1

问题在于appear事件被触发的频率，并且在滚动时会不断触发（我假设jquery.appear.js是如何编码的）。将事件绑定从$(document.body).on('appear', ...)更改为$(document.body).one('appear',...)（on与one）仅在第一次触发事件。由于您正在使用委托事件处理（将事件设置为文档然后检查事件目标），因此它仅触发出现的第一个计数器。

解决方案1：你可以实现自己的逻辑，你可以跟踪已经出现的计数器，如果在再次执行.animate之前已经出现保释的计数器上触发了出现的事件。这可以通过存储每个计数器的状态（最初出现）来完成。

解决方案2：或者，可能更简单的方法是，在计数器开始制作动画时添加一个类，然后使用例如在再次运行hasClass之前，jQuery的return和.animate。

在滚动动画（jQuery.appear.js）期间阻止滚动触发？

1 个答案: