淡出文本，然后替换文本，然后淡入文本

Question

我想在0.75秒内淡出一些文本，然后用新文本替换它，并在0.75秒内淡入这个新文本。这反过来重复，因此，有两个文本交替出现。然后我每5秒重复一次。当使用CSStransition属性更改div的背景色时，我可以很容易地做到这一点，但这在el.innerHTML上不起作用。请让我知道这是否可以使用CSS、jQuery或纯Javascript。这是我的代码：

<p id="alternating">Some text</p>

function change_text(){
let current_text = document.getElementById("alternating").innerHTML;
let other_text = "Other text";
let orig_text = "Some text";
if (current_text === "Some text"){
$("current_text").fadeOut("slow");
current_text.innerHTML = other_text;
$("current_text").delay(750).fadeIn("slow");
}
else {
$("current_text").fadeOut("slow");
current_text.innerHTML = orig_text;
$("current_text").fadeIn("slow");
}
}

setInterval(change_text, 5000);

Answer 1

尝试下面的代码段。

JQuery

function change_text(){
let current_text = $('#alternating').text();
let other_text = "Other text";
let orig_text = "Some text";

if (current_text == "Some text"){
$("#alternating").fadeOut("slow", function() {
$('#alternating').text(other_text);
});
$("#alternating").delay(750).fadeIn("slow");
}else {
$("#alternating").fadeOut("slow", function() {
$('#alternating').text(orig_text);
});
$("#alternating").delay(750).fadeIn("slow");
}

}
setInterval(change_text, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="alternating">Some text</p>

CSS

div{ posititon: relative; }
.other-text{ position: absolute; }
.other-text:nth-child(1){ animation-name: fade; animation-fill-mode: both; animation-iteration-count: infinite; animation-duration: 5s; animation-direction: alternate-reverse;  }
.other-text:nth-child(2){animation-name: fade;animation-fill-mode: both;animation-iteration-count: infinite;animation-duration: 5s;animation-direction: alternate;}
@keyframes fade{
0%,50% {
opacity: 0;
}
100%{
opacity: 1;
}
}

<p class="other-text">Other text</p>
<p class="other-text">Some text</p>

Answer 2

function change_text(){
let e = $('#alternating');
let other_text = "Other text";
let orig_text = "Some text";
if (e.innerText === orig_text){
e.fadeOut("slow", ()=>{
e.innerHTML = other_text;
e.fadeIn("slow");
});
}
else {
e.fadeOut("slow", ()=>{
e.innerHTML = orig_text;
e.fadeIn("slow");
});

}
}

你可以试试这个我们使用all元素，而不是getElementById((.innerHtml，因此我们可以访问有关该元素的所有内容。您需要JQuery才能使其工作。然后，我们使用fadeout的result((回调函数，等待这一切结束后再更改文本。

Answer 3

以下是解决方案：

<p id="alternating">Some text</p>

function changeText(){
const currentText = $('#alternating').text();
const otherText = "Other text";
const deafultText = "Some text";

if (currentText === "Some text"){
$("#alternating").fadeOut("slow", function() {
$('#alternating').text(otherText);
$("#alternating").delay(750).fadeIn("slow");
});
} else {
$("#alternating").fadeOut("slow", function() {
$('#alternating').text(deafultText);
$("#alternating").delay(750).fadeIn("slow");
});

} 
}
$( document ).ready(function() {
setInterval(changeText, 5000);
});

CodePen演示

Answer 4

您可以尝试使用jQuery函数html((而不是innerHTML。

function change_text(){
let current_text = $('#alternating').html();
let other_text = "Other text";
let orig_text = "Some text";

if (current_text == "Some text"){
$("#alternating").fadeOut("slow", function() {
$('#alternating').html(other_text);
});
$("#alternating").delay(750).fadeIn("slow");
} else {
$("#alternating").fadeOut("slow", function() {
$('#alternating').html(orig_text);
});
$("#alternating").delay(750).fadeIn("slow");
}

}
setInterval(change_text, 5000);