Imam Imam - 3 months ago 9
HTML Question

How I can input some animation calculating for the number?

I have this script and I want to input some animation for the number, but I don't know how to resolved that.



$('#choose').change(function() {
if($(this).val() == '1') {
document.getElementById('harga').innerHTML = "5000";
}
if($(this).val() == '2') {
document.getElementById('harga').innerHTML = "10000";
}
if($(this).val() == '3') {
document.getElementById('harga').innerHTML = "30000";
}
})

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="harga" id="harga"> 5000 </div>
<select id="choose">
<option value="1">choose 1</option>
<option value="2">choose 2</option>
<option value="3">choose 3</option>
</select>




Answer

If you meant the animation as counter number down or up,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="harga" id="harga"> 5000 </div>
<select id="choose">
  <option value="1">choose 1</option>
  <option value="2">choose 2</option>
  <option value="3">choose 3</option>
</select>


<script type="text/javascript">
var options = {"1":5000,"2":10000,"3":30000,}
var amount = options["1"]; //default

$('#choose').change(function() {
  selected_amount = options[$(this).val()];

  $({ Counter: amount }).animate({ Counter: selected_amount }, {
    duration: 1000, //speed
    easing: 'swing',
    step: function () {
      $('#harga').text(Math.ceil(this.Counter));
    },
    complete: function(){
      $('#harga').text(selected_amount);
      amount = selected_amount;
    }
  });  
 
});
</script>

Comments