如何在单击事件中为 .text 更改设置动画？

Question

所以，我正在开发一个基本的计算器，它在点击时将递增的变量输出到 div。每次用户点击“金额向上”按钮时，“金额输出”会显示一个比“200”大的数字。

这是我用来执行此操作的 jQuery：

$(".amount-upwards").on("click",function() {

amount += 200;

$(".amount-output").text('$'+amount);
});

我希望能够在每次单击按钮时为“金额输出”文本添加一个小的淡入淡出。

我尝试了 fadeIn() 的变体，还使用了 css 淡入淡出，但是，对于这个超级新手，不能完全确定正确的顺序或方法。

Answer 1

$(".amount-upwards").on("click",function() {

  amount += 200;
  var $amountOutput = $(".amount-output");

  $amountOutput.fadeOut(function(){
    $amountOutput.text('$'+amount)
    $amountOutput.fadeIn()
  });

});