inviewとanimateNumberの組み合わせ

Question

JqueryのinviewとanimateNumberを組み合わせて要素が表示されればカウントアップ開始をさせたいのですが、
要素が表示範囲外から消えたら再度カウントアップを始めてしまいます。

どのように処理をとめればいいでしょうか？

<script>
$(function() {
$('.inview').css('opacity', 0);
$('.inview').on('inview', function(event, isInView) {
	if (isInView) {
		//表示
		$(this).stop().animate({opacity: 1}, 1000);
		
		$('.count-a').animateNumber({ number: 100,easing: 'easeInQuad'}, 2000);
        $('.count-b').animateNumber({ number: 20,easing: 'easeInQuad'}, 900);
		
	}
	else {
		
	}
});
});
</script>

Answer 1

一度だけ実行させたいのであれば、onメソッドではなくoneメソッドでイベントをバインドしてみてはどうでしょうか？
http://api.jquery.com/one/

<script>
$(function() {
$('.inview').css('opacity', 0);
$('.inview').one('inview', function(event, isInView) {
    if (isInView) {
        //表示
        $(this).stop().animate({opacity: 1}, 1000);

        $('.count-a').animateNumber({ number: 100,easing: 'easeInQuad'}, 2000);
        $('.count-b').animateNumber({ number: 20,easing: 'easeInQuad'}, 900);

    }
    else {

    }
});
});
</script>

Comments

[pachiro]

無事解決しました！oneのこと知りませんでした。ありがとうございます！