Guide for implementing smooth fade in and out effect for toggling text with button click

Question

Guide for implementing smooth fade in and out effect for toggling text with button click

I have this code snippet that toggles text on button click:

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

Currently, there is no smooth transition between the text changes when the button is clicked. I'm unsure whether to use CSS or jQuery for this effect.

I attempted to create a CSS class named smooth-fade:

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

I then applied this class to all p tags but it didn't produce the desired result. What would be the best approach to achieve a smooth transition in this scenario?

javascript html jquery css

Answer 1

Answer №1

If you're looking to achieve this effect, consider utilizing jQuery:

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

Start by fading out the desired elements, then trigger the callback function to fade in the others.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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>

Answer 2

If you're looking to achieve this effect, consider utilizing jQuery:

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

Start by fading out the desired elements, then trigger the callback function to fade in the others.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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>

Answer 3

Answer №2

Your coding skills could benefit from a more organized approach. Consider the following steps for better reusability:

Encapsulate all content within a wrapper element.
Apply the .active class to identify visible elements.
Utilize the custom jQuery function nextOrFirst().

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

// Adapted '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>

Answer 4

Your coding skills could benefit from a more organized approach. Consider the following steps for better reusability:

Encapsulate all content within a wrapper element.
Apply the .active class to identify visible elements.
Utilize the custom jQuery function nextOrFirst().

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

// Adapted '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>

Answer 5

Answer №3

Your code needs a bit of organization.. It's recommended to use addClass or classList.add methods when changing styles of an element with JavaScript instead of directly modifying style properties.

Check out 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)
  };

Answer 6

Your code needs a bit of organization.. It's recommended to use addClass or classList.add methods when changing styles of an element with JavaScript instead of directly modifying style properties.

Check out 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)
  };

Guide for implementing smooth fade in and out effect for toggling text with button click

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble properly wrapping divs using nextUntil() method

FadeToggle is a jQuery function that allows you to toggle the visibility of an

Content towering over the footer

The issue arises when d3.scaleLinear returns NaN upon the second invocation

The Image component in a test within Next.js was not wrapped in an act(...) during an update

Animate the sliding of a div from the right side to the left side with the animate

What are some ways to troubleshoot the UI of a Nativescript app?

Easy steps to dynamically add buttons to a div

Experiencing a blank page error when trying to render a partial view using Angular.js

Any tips for filtering an array within an array of objects using the filter method?

Utilize the event bus by calling `this.$root.$emit` command

I am unable to pass a variable through a callback, and I cannot assign a promise to a

Having trouble running tests on the Express.js server

Testing Restful API Endpoints and Code Coverage with Node.js using Mocha

Unable to append Jquery attribute to a div component

Utilizing data attributes for storing and selecting dual prices on an option

Using Vue.js along with vuex and axios allows for data retrieval only upon the second load

Unable to utilize ES6 syntax for injecting a service

The reason for setting a variable as void 0 in JavaScript

An issue occurred while calling the Selenium web driver: the driver.get() function couldn't access the attribute "href" of the linked_url, resulting in a stale element reference