How to smooth fade in-out for toggle text using button click?

Question

I have the following code -

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function toggleText(){
    if ($("#txt-1").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "block");
        $("#txt-3").css("display", "none");
    } else if ($("#txt-2").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "block");
    } else {
        $("#txt-1").css("display", "block");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "none");
    }
};
</script>
</head>
<body>

<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>
<p id="txt-3" style="display: none;">See you soon!</p>

</body>
</html>

It toggles the text on button click

The thing that I am looking for is, to make a smooth transition between the texts (maybe fade in-out). I am not sure whether to write a CSS or jQuery.

What I tried is to write a CSS class -

.smooth-fade {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

and provide this class name smooth-fade to all the h1 tags. It does not work, what is the best workaround to do this task ?

Instead of display block use visibility and opacity to achieve an effect — Sanmeet, Jun 22 '21 at 17:02
You can do it in css or jquery, here is the jquery fadeOut https://api.jquery.com/fadeout/ there is also a fadeIn in jquery — Huangism, Jun 22 '21 at 17:03

dantheman · Accepted Answer · 2021-06-22T17:09:27.573

You can use jquery for this:

  $( "#txt-1" ).fadeOut( "slow", function() {
     $("#txt-2").fadeIn();
  });

First fade out the elements you want, then use the callback function to fade the others in.

function toggleText(){
  $( "#txt-1" ).fadeOut( "slow", function() {
     $("#txt-2").fadeIn();
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>

score 1 · Answer 2 · answered Jun 22 '21 at 17:17

Your code is a little messy. I would do something more reusable:

Wrap everything in a wrapper.
Add .active class to know what's visible.
use nextOrFirst() custom jquery function

function toggleText() {
  var $active = $('.active');
  $active.removeClass('active').fadeOut(500, function() {
    $active.nextOrFirst().fadeIn().addClass('active');
  });
};

//Next or first function from https://stackoverflow.com/a/15959855/559079
$.fn.nextOrFirst = function(selector) {
  var next = this.next(selector);
  return (next.length) ? next : this.prevAll(selector).last();
};

$.fn.prevOrLast = function(selector) {
  var prev = this.prev(selector);
  return (prev.length) ? prev : this.nextAll(selector).last();
};

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
  </script>
</head>

<body>

  <button onclick="toggleText()">Toggle</button>

  <div class="wrapper">
    <p id="txt-1" class="active">Hello</p>
    <p id="txt-2" style="display: none;">How are you?</p>
    <p id="txt-3" style="display: none;">See you soon!</p>
  </div>

</body>

</html>

score 1 · Answer 3 · answered Jun 22 '21 at 17:45

Your code is pretty messy .. Also when we want to change styles of the element using js it is preferred to use addClass or classList.add methods instead of simple style.background something ...

See this example =>

HTML

  <button onclick="toggleText()">Toggle</button>
  <p id="txt" class="fader">
    Hello
  </p>

CSS

.fader {
  opacity: 1;
  visibility: visible;
  transition: all  1s ease-in-out;
}
.fade-in {
  opacity: 0;
}

JS

  let textArray = ["Hello", "How are you ? ", "See you soon ! "]
  let id = 1;
  const text = document.querySelector('#txt');
  
  function toggleText() {
    if (id > textArray.length - 1) {
      id = 0;
    }
    text.classList.add('fade-in');
    setTimeout(function () {
      text.innerText = textArray[id]
      text.classList.remove('fade-in')
      id++
    }, 1000)
  };

How to smooth fade in-out for toggle text using button click?

3 Answers3