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

Question

我想在 0.75 秒的时间内淡出一些文本，然后用新文本替换它，然后在 0.75 秒的时间内淡入这个新文本。这会以另一种方式重复，因此，有两个文本交替出现。然后我每 5 秒重复一次。当使用 CSS transition属性更改 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");
     });
     
}
}

你可以试试这个我们使用所有元素而不是 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 demo

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

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

fadeout text, then replace text, then fadein text

javascript

css

jquery

css-transitions