我试图让这个jQuery动画计数器在用户向下滚动200像素以下时立即触发:
here中的原始jQuery代码
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
我尝试将其包装在以下jQuery中,但直到最后都不会触发动画:
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
});
HTML:
<span class="Count">100</span>
<br/>
<span class="Count">200</span>
<br/>
<span class="Count">300</span>
其他帖子的小提琴是here
当用户向下滚动到视图或页面向下200像素时,触发jQuery计数器的最佳方法是什么?我也尝试过jQuery Wayfinder,但使其运作起来并没有任何运气。
最佳答案
触发动画之前,请取消绑定滚动处理程序(与$(window).off("scroll")
),以防止用户继续滚动时动画重新启动。
$(window).scroll(startCounter);
function startCounter() {
if ($(window).scrollTop() > 200) {
$(window).off("scroll", startCounter);
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
}
body {
font-family: sans-serif;
height: 300vh;
}
.Count {
position: fixed;
top: 8px;
left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Count">100</div>