大家好，我有问题。我如何淡入（和淡出）按下“显示更多”按钮时出现的文本。我已经搜索并找到了w3school的这段代码，我试图在自己的代码中实现它，但是我需要帮助吗？
找到一段代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").fadeOut()
});
$(".btn2").click(function() {
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>var status = "less";
function toggleTextPersonal() {
if (status == "less") {
document.getElementById("showMorePersonal").style.display = "block";
document.getElementById("toggleButtonPersonal").innerHTML = "Show Less <i class='fas fa-caret-up'></i>";
status = "more";
} else if (status == "more") {
document.getElementById("showMorePersonal").style.display = "none";
document.getElementById("toggleButtonPersonal").innerHTML = "Show More <i class='fas fa-caret-down'></i>";
status = "less"
}
}<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div id="showMorePersonal" style="display: none;">
test
</div>
<button type="button" id="toggleButtonPersonal" onclick="toggleTextPersonal();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button>
<div id="textArea" style="display: none;">
</div>
</body>
</html>最佳答案
您应该导入jQuery文件，并按照片段中所述使用$("#showMorePersonal").fadeIn();和$("#showMorePersonal").fadeOut();。
var status = "less";
function toggleTextPersonal()
{
if (status == "less") {
$("#showMorePersonal").fadeIn();
document.getElementById("toggleButtonPersonal").innerHTML = "Show Less <i class='fas fa-caret-up'></i>";
status = "more";
} else if (status == "more") {
$("#showMorePersonal").fadeOut();
document.getElementById("toggleButtonPersonal").innerHTML = "Show More <i class='fas fa-caret-down'></i>";
status = "less"
}
}<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div id="showMorePersonal" style="display: none;">
test
</div>
<button type="button" id="toggleButtonPersonal" onclick="toggleTextPersonal();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button>
<div id="textArea" style="display: none;">
</div>
</body>
</html>关于jquery - 淡入/淡出“显示更多”按钮文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50200092/