티스토리 뷰

countup.js 같은 숫자 카운트 효과 순수 제이쿼리로 구현하기

 

$('.num').each(function () {
    var $this = $(this)
    var regex = /[^0-9]/g;
    var result = $this.text().replace(regex, "");
    $({
        countNum: 0
    }).animate({
        countNum: result
    }, {
        duration: 2000,
        easing: 'linear',
        step: function () {
            $this.text(Math.floor(this.countNum).toString()
            .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","));
        },
        complete: function () {
            $this.text((this.countNum).toString()
            .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","));
        }
    });
});
공지사항