Animate Inkrement/Dekrement Nummer nach Onclick

Question

Ich spiele mit der jquery.animateNumber-Bibliothek: https://github.com/aishek/jquery-animateNumber, weil von dem, was ich sehe, ist Licht und ziemlich schnell können Sie einen schönen Effekt darin bekommen. Leider habe ich ein Problem mit einer Sache. Ich muss den Wert im div um 5000 mit jedem Klick verringern (animierende Zahlen) und um 5000 verringern, indem ich die Zahlen in der Mitte animiere. Was das Inkrementieren betrifft, kann ich die variable Zerlegung nicht bewältigen.

Wie kann ich mein Problem lösen?

value = parseInt($("#test").html()) * 2; 
 
$("#add").on("click", function() { 
 

 
    if (value < 50000) { 
 
    $("#test").animateNumber({ 
 
     number: value 
 
    }); 
 
    value += 5000; 
 
    } else { 
 
    $("#test").html("MAX"); 
 
    } 
 

 
}); 
 

 
$("#delete").on("click", function() { 
 
    $("#test").animateNumber({ 
 
    number: value 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script> 
 

 

 
<button type="button" id="add">Add</button> 
 
<button type="button" id="delete">Delete</button> 
 
<div id="test">5000</div>

Answer 1

Hier ist das Beste, ich könnte es für Sie arbeiten lassen. Der Trick besteht darin, die Eigenschaft number des Zielelements festzulegen, die als Startwert für den Start der nächsten Animation dient. Ich habe den "MAX" -Test zur Veranschaulichung entfernt.

$("#add").on("click", function() { 
 
    var nextNumber = parseInt($('#test').text(), 10) + 5000; 
 
    $("#test").animateNumber({ 
 
     number: nextNumber, 
 
    }, 
 
    'normal', 
 
    function() { 
 
     $('#test').prop('number', nextNumber); 
 
     } 
 
    ); 
 
}); 
 

 
$("#delete").on("click", function() { 
 
    var nextNumber = parseInt($('#test').text(), 10) - 5000; 
 
    $("#test").animateNumber({ 
 
    number: nextNumber 
 
    }, 
 
    'normal', 
 
    function() { 
 
     $('#test').prop('number', nextNumber); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script> 
 

 

 
<button type="button" id="add">Add</button> 
 
<button type="button" id="delete">Delete</button> 
 

 
<div id="test">0</div>

Answer 2

Wenn ich Sie richtig verstanden Sie von 5000 erhöhen möchten, wenn Sie add Taste klicken und verringern ähnlich, wenn delete unten klicken sehen, ob dies ist, was Sie

value = parseInt($("#test").html()); 
 

 
$("#add").on("click", function() { 
 
    console.log(value); 
 
    if (value < 50000) { 
 

 
    value += 5000; 
 
    $("#test").animateNumber({ 
 
     number: value 
 
    }); 
 
    } else { 
 
    $("#test").html("MAX"); 
 
    } 
 

 
}); 
 

 
$("#delete").on("click", function() { 
 
    value -= 5000; 
 
    $("#test").animateNumber({ 
 
    number: value 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script> 
 

 

 

 

 

 
<button type="button" id="add">Add</button> 
 
<button type="button" id="delete">Delete</button> 
 
<div id="test">5000</div>

gesucht