时间戳

首页 > 解决方案 > 使用淡入更改文本，如何？

javascript - 使用淡入更改文本，如何？

问题描述

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

<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>

标签： javascripthtml

解决方案

使用 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>

推荐阅读