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"