javascript - 将 jQuery 转换添加到函数中

Question

我有一个 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效果，使消息显示流畅？

Answer 1

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

其中持续时间是

A string or number determining how long the animation will run.

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>