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

使用：jQuery.appear.js和countUp.js插件在滚动动画（jQuery.appear.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/。当您在数字仍在滴答时滚动数字时，动画将无法完成。

来源

2017-08-24 tcheng

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

解决方案1：您可以实现自己的逻辑，以跟踪已经出现的计数器，并且如果出现的事件在已经出现的计数器上触发，则在再次执行.animate之前已经出现过保释。这可以通过为每个计数器存储状态（最初出现）来完成。解决方案2：或者，也许更简单的方法是，一旦计数器开始动画并添加一个类，例如添加一个类。再次运行.animate之前，jQuery的hasClass和return。

来源

2017-08-24 20:44:55 vellip

谢谢，vellip！ '.one'是一个好主意，但不幸的是，它会使动画只运行第一个计数器并跳过第二个计数器。我将不得不尝试其他建议并查看它们的工作方式。非常感谢！ – tcheng

也许这不是很清楚，我知道它会跳过其他计数器，这就是为什么我发布了下面的解决方案。：d – vellip

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

回答

相关问题