CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Dan
Dan

Reputation: 103

fadeout text, then replace text, then fadein text

I want to fade out some text over a period of .75 seconds, then replace it with new text, and the fade in this new text over a period of .75 seconds. This repeats going the other way, and, as such, there are two texts alternating. I then put this on repeat every 5 seconds. I can do this easily when changing the background color of the div using CSS transitionproperty, but this does not work on el.innerHTML. Please let me know if this is possible using CSS, jQuery, or just plain Javascript. Here is my code:

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

Upvotes: 1

Views: 1804

Answers (4)

vinhtranchau
vinhtranchau

Reputation: 595

You can try to use jQuery function html() instead of 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);

Upvotes: 0

Rashed Rahat
Rashed Rahat

Reputation: 2475

Here is the solution:

<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

Upvotes: 0

Bhautik
Bhautik

Reputation: 11282

Try the below snippet.

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>

Upvotes: 2

Vollfeiw
Vollfeiw

Reputation: 244

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

You can try this We use all element instead of getElementById().innerHtml, so we can access everything about the element. You need JQuery in order to get this working. We then use the result() callback function of fadeout to wait until this is over before changing text.

Upvotes: 0

Related Questions