Question

所以我的问题是我知道如何更改文本，但是我不知道如何通过单击淡入新文本。

<script>
function changeText() {
 document.getElementById("demo").innerHTML = " Newtext";
 document.getElementById("demo2").innerHTML = " Newtext2";
 }
</script>
<body>
<p id="demo">text</p>
<p id="demo2">text2</P>
<button onclick="changeText()">Change Texts</button>

Answer 1

使用JQuery时，fadeOut和fadeIn函数可以很好地工作并具有回调，因此您可以在淡出后更改文本，然后再淡入。

function changeText() {
 $("#demo").fadeOut(function() {
   $(this).html(" Newtext");
   $(this).fadeIn();
 });
 $("#demo2").fadeOut(function() {
   $(this).html(" Newtext2");
   $(this).fadeIn();
 });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo">text</p>
<p id="demo2">text2</P>
<button onclick="changeText()">Change Texts</button>

淡入淡出地更改文本，如何？

1 个答案: