javascript - 向功能添加jQuery过渡

我有一个onclick函数，可删除HTML div上的display：none样式。

function myFunctionUnder18() {
  document.getElementById("myAgeMessage").style.display = "block";
}

<input type="radio" name="age" onclick="myFunctionUnder18()" >
<div style="display: none;" id="myAgeMessage"><p>Sorry. You need to be at least 18 years of age.</p></div>

有没有一种方法可以添加jQuery效果以使消息平滑显示？

最佳答案

您可以将持续时间（以毫秒为单位）传递给.show()。

持续时间在哪里


  一个字符串或数字，确定动画将运行多长时间。

function myFunctionUnder18() {
  $("#myAgeMessage").show(1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="age" onclick="myFunctionUnder18()" >
<div style="display: none;" id="myAgeMessage"><p>Sorry. You need to be at least 18 years of age.</p></div>

您也可以使用fadeIn()：

function myFunctionUnder18() {
  $("#myAgeMessage").fadeIn(1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="age" onclick="myFunctionUnder18()" >
<div style="display: none;" id="myAgeMessage"><p>Sorry. You need to be at least 18 years of age.</p></div>