Счетчик анимации к вычисленному значению

Question

Мне нужна моя анимация счетчика, чтобы анимировать значение, динамически вычисленное в диапазоне по выбранным флажкам. Значения рассчитываются штрафом, однако они не оживляют. http://jsfiddle.net/dbtj93kL/

$('input[type="checkbox"]').change(function() { 
 
    var total_span = 0; 
 
    $('input[type="checkbox"]').each(function() { 
 
    if ($(this).is(':checked')) { 
 
     total_span += parseInt($(this).prop('value')); 
 
    } 
 
    }); 
 

 
    $("#usertotal").html(total_span); 
 
}); 
 

 
jQuery({ 
 
    Counter: 0 
 
}).animate({ 
 
    Counter: $('.Single').text() 
 
}, { 
 
    duration: 1000, 
 
    step: function() { 
 
    $('.Single').text(Math.ceil(this.Counter)); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type="checkbox" value="100" onclick="test(this);">1</input> 
 
<input type="checkbox" value="200" onclick="test(this);">2</input> 
 
<input type="checkbox" value="300" onclick="test(this);">3</input> 
 
<input type="checkbox" value="400" onclick="test(this);">4</input> 
 
<br /> 
 
<span id="usertotal" class="Single"> </span>

Answer 1

Вам нужно сделать анимацию, когда флажок, а не на странице загрузки, как вы делали:

$('input[type="checkbox"]').change(function() { 
 
    var total_span = 0; 
 
    $('input[type="checkbox"]').each(function() { 
 
     total_span += this.checked && +this.value; 
 
    }); 
 
    $({counter: +$('#usertotal').text()}).animate({counter: total_span},{ 
 
     duration: 500, 
 
     step: function() { 
 
      $('#usertotal').text(Math.round(this.counter)); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<input type="checkbox" value="1">1</input> 
 
<input type="checkbox" value="2">2</input> 
 
<input type="checkbox" value="3">3</input> 
 
<input type="checkbox" value="4">4</input> 
 
<br /> 
 
<span id="usertotal"></span>