Javascript jQuery-在视口中显示数字时设置动画
当前,当用户滚动并在视口中显示DIV时,我正在尝试设置一些数字的动画。如下所示: 在这个例子中,它看起来是CSS3,出于某些原因,我更喜欢使用jQuery。 目前,我使用“”插件和此函数检查div是否出现在视口中:Javascript jQuery-在视口中显示数字时设置动画,javascript,jquery,jquery-animate,viewport,Javascript,Jquery,Jquery Animate,Viewport,当前,当用户滚动并在视口中显示DIV时,我正在尝试设置一些数字的动画。如下所示: 在这个例子中,它看起来是CSS3,出于某些原因,我更喜欢使用jQuery。 目前,我使用“”插件和此函数检查div是否出现在视口中: $.fn.is_on_screen = function(){ var win = $(window); var viewport = { top : win.scrollTop(), left : win.scrollLeft() }; viewport.rig
$.fn.is_on_screen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
HTML:
function animate_stats() {
$('.stats_number').each(function() {
if(!$(this).hasClass("numbered")) {
var thisnumber = $(this).attr('title');
$(this).animateNumber({ number: thisnumber }, 3000, function() {
$(this).addClass('numbered');
});
}
});
};
if( $('#statistics').is_on_screen() ) {
animate_stats();
}
$(window).scroll(function(){
if( $('#statistics').is_on_screen() ) {
animate_stats();
}
});
<a href="#" class="stat">
<div class="stats_number" title="79">0</div>
<br />
My title
</a>
问题在于,当div出现时,数字动画会反复出现。当然我希望动画只运行一次。
我想这个问题来自于我对“每个”功能的使用,但请务必注意
有人能帮忙吗?多谢各位 动画运行后,删除侦听器
$(window).on('scroll.animateStats', function(){
if( $('#statistics').is_on_screen() ) {
animate_stats();
$(window).off('scroll.animateStats');
}
});
我给scroll事件命名了名称空间,这样当我们删除它时,我们只删除这个事件处理程序,而不是所有的scroll处理程序。可能想签出,谢谢你的回复,正如我说的,我更喜欢使用jQuery而不是CSS。