onclickの後のインクリメント/デクリメント数をアニメ化

Question

私はjquery.animateNumberライブラリで再生しています：https://github.com/aishek/jquery-animateNumber、私が見ているものは軽くてかなり速いので、そこに素敵な効果が得られるからです。残念ながら、私には1つの問題があります。私はdivの値を各クリック（アニメーション化する数値）で5000ずつ減らし、中央で数値をアニメーション化することによって5000を減らす必要があります。増分については、可変分解には対応できません。

問題を解決するにはどうすればよいですか？

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

これは私があなたのために働くことができる最高です。このトリックは、ターゲット要素のnumberプロパティを設定することです。これは、次のアニメーションが開始されるときのシード値として機能します。私はイラストレーションのために "MAX"テストを削除しました。

$("#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

私はこれがあなたが望んでいるならば、あなたはaddボタンをクリックして、同様にdeleteは、以下を参照してくださいクリックしたときにデクリメントとき5000インクリメントしたい正しくあなたを理解している場合

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>