如何在点击事件中为.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()
  });

});