Skip to content Skip to sidebar Skip to footer

Animated Output Based On Single Input Field

I'm trying to animate an output which is calculated based on a single input value * 4.5. The calculation itself is working but I cannot figure out how to animate the value, what I'

Solution 1:

You'll probably want to use requestAnimationFrame like this:

functionupdateOutput() {
  var income = $("#income").val() * 4.5;
  var output = Number($("#loan").text());

  if (income !== output) {
    if (income > output)
      output += 0.5;
    elseif (income < output)
      output -= 0.5;

    $("#loan").text(output);
    requestAnimationFrame(updateOutput);
  }
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><formid="ewcalc"oninput="updateOutput()"><inputid="income"type="number"value="0" /><outputfor="income"id="loan">0</output></form>

Post a Comment for "Animated Output Based On Single Input Field"