jQuery Keyup事件绑定的slideDown动画无法生效，原因是什么？

问题原因 #

slideDown() 动画的核心作用是将原本隐藏的元素通过滑动效果显示出来。你的代码里，#add 这个h3元素默认处于显示状态，因此调用 slideDown() 时不会产生任何视觉变化。

修复方案 #

有两种实用的修复方式：

方式1：初始隐藏目标元素 #

在CSS中给#add设置初始隐藏状态：

#add {
  display: none;
}

这样每次触发keyup事件且计算有效时，就会触发slideDown动画显示计算结果。

方式2：先隐藏再执行slideDown #

如果不想修改CSS，可以在设置文本后先调用slideUp()瞬间隐藏元素，再执行slideDown()动画：

$(document).ready(function() {
  $('#num2').keyup(function() {
    let num1 = parseFloat($('#num1').val());
    let num2 = parseFloat($('#num2').val());

    if (!isNaN(num1) && !isNaN(num2)) {
      let sum = num1 + num2;
      $('#add').text(sum).slideUp(0).slideDown(4000);
    } else {
      $('#add').text("Please enter valid numbers");
    }
  });
});

这里slideUp(0)是让元素瞬间隐藏，随后执行4秒的slideDown展开动画。

完整代码示例 #

HTML（含CSS） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<style>
#add {
  display: none;
}
</style>

<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<h3 id="add"></h3><br/>
<h3 id="sub"></h3><br/>
<h3 id="mul"></h3><br/>
<h3 id="div"></h3><br/>

JS代码 #

$(document).ready(function() {
  $('#num2').keyup(function() {
    let num1 = parseFloat($('#num1').val());
    let num2 = parseFloat($('#num2').val());

    if (!isNaN(num1) && !isNaN(num2)) {
      let sum = num1 + num2;
      $('#add').text(sum).slideDown(4000);
    } else {
      $('#add').text("Please enter valid numbers").show(); // 无效输入时直接显示提示文本
    }
  });
});

注意：如果用了初始隐藏的CSS，在无效输入的分支里需要调用show()，否则用户看不到错误提示。

内容的提问来源于stack exchange，提问作者Kartik Thakkar