CODEWITHSUNDEEP
javascriptjqueryanimation
PЯINCƎ
PЯINCƎ

Reputation: 724

Animate number by incrementing and decrementing

I want to do some number animation in some div value, the issue is that the animation start each time from 0 but I don't want this, I want that it to start from the previous value.

Example: If I enter 10, animation starts from 0 and goes to 10. If I then change the 10 to 8, I want the animation to go from 10 to 8 and not from 0 to 8 again. Basically, it should increment or decrement from the previous value entered!

Other think, if I enter some float e.g. 0.10, it displays 1 and I want it to display the exact value.

Thanks

JSfiddle Demo

/*numbers values*/
$('.num').bind('change paste keyup', function() {
  var v1 = $(this).val();
  $('.price').html(v1);
  animatePrince();
});


/*numbers animation*/
function animatePrince() {
  $('.price').each(function() {
    $(this).prop('Counter', $(this).val()).animate({
      Counter: jQuery(this).text()
    }, {
      duration: 1000,
      easing: 'swing',
      step: function(now) {
        jQuery(this).text(Math.ceil(now));
      }
    });
  });
}
.s1 {
  display: block;
}

.s2 {
  display: block;
  margin-bottom: 25px;
}

.num {
  display: block;
  margin-bottom: 30px;
  border: 1px solid #333;
  padding: 20px;
}

.price {
  border: 1px solid #222;
  padding: 10px 30px;
  padding: 20px 90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="s1">Input</span>
<input class="num" type="float" value="1">
<span class="s2">Result</span>
<span class="price"></span>

Upvotes: 2

Views: 2066

Answers (2)

Babu Swami
Babu Swami

Reputation: 798

I suggest you update your jQuery section to the below mentioned code:

function isFloat(n){
    return Number(n) === n && n % 1 !== 0;
}

function isInt(n){
    return Number(n) === n && n % 1 === 0;
}

/*numbers values*/
$('.num').bind('change paste keyup', function(){
    var value = $(this).val();
  if(isInt(parseFloat(value)))
  {
    animatePrinceInt(parseInt(value));
  }
  else {
    animatePrinceFloat(parseFloat(value));
  }
});

/*numbers animation*/
function animatePrinceFloat(value) {
$('.price').val(value);

$({countNum1: $('.price').text()})
  .animate({countNum1: value }, {
  duration: 3000,
  easing:'linear',
  step: function() {
    var nn= this.countNum1;
    $('.price').text(parseFloat(nn).toFixed(2));
  },
  complete: function() {
    var nn= this.countNum1;
    $('.price').text(parseFloat(nn).toFixed(2));
  }
});

}

/*numbers animation*/
function animatePrinceInt(value) {
$('.price').val(value);

$({countNum: $('.price').text()})
  .animate({countNum: value}, {
  duration: 3000,
  easing:'linear',
  step: function() {
    var nn= this.countNum;
    $('.price').text(Math.floor(nn));
  },
  complete: function() {
    var nn= this.countNum;
    $('.price').text(Math.floor(nn));
  }
});

}

Please update the value of duration. I have used it as 3000 to see the animation.

Upvotes: 2

Gokul Sandeep
Gokul Sandeep

Reputation: 59

I have done some changes in our fiddle.It works fine.

Script:

$('.num').on('change', function() {
    var v1 = $(this).val();
    animatePrince();
});


/*numbers animation*/
function animatePrince() {
    var target = parseFloat($('.prince').val());
    var number = parseFloat($('.num').val());
    console.log(number + "  " + target + " " + (number > target));
    if (number > target) {
        var interval = setInterval(function() {
            $('.prince').val(target.toFixed(1));
            if (number <= target) clearInterval(interval);
            target = parseFloat(target + 0.1)
        }, 30);
    } else {
        var interval = setInterval(function() {
            $('.prince').val(target.toFixed(1));
            if (number >= target) clearInterval(interval);
            target = parseFloat(target - 0.1)
        }, 30);
    }
}

HTML:

<span class="s1">Input</span>
<input class="num" type="float" value="1">
<span class="s2">Result</span>
<input class="prince" type="float" value="1">

css:

.s1 {
    display: block; }

.s2 {
    display: block;
    margin-bottom: 25px; }

.num, .prince {
    display: block;
    margin-bottom: 30px;
    border: 1px solid #333;
    padding: 20px; }

JSfiddle Demo

Upvotes: 2

Related Questions