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

How can Vue be used to dynamically change the input type on focus?

Managing the AJAX response from a remote CGI script

Adjust the size of the font in an image created from text using a dynamic function

What's the best way to place the text or operator from a button into an input field?

Struggling to make jQuery code function properly in Wordpress, despite attempting to use noConflict

Vue: Conditionally display a division depending on v-if, excluding cases where the div returns null

Can someone explain the significance of this CSS code (specifically regarding font-size division)?

Hacking through external script injections into the browser

Is it possible to implement a real-time data update feature in a Gridview using ajax in C#

The Cross-Origin Resource Sharing request using the PUT method has been denied due to restrictions set by the

Identify if a process operates synchronously or asynchronously

Unable to invoke any fineUploader functions within a callback function

Encountering an issue with importing createSagaMiddleware from 'redux-saga' while working on my create-react-app project

Is it feasible to incorporate one iOS app within another iOS app through in-app purchasing or subscription?

Discrepancies in Span Element Behavior Between Firefox and Chrome

An animation in CSS where an element moves off the screen to the right in absolute position and then returns from the

What is the best way to switch out the characters 'a' and 'b' in a given string?

Establishing headers in hapi.js

Input form with multiple fields. Automatically display or hide labels based on whether each field is populated or empty

Rest assured, with Ajax Security, your protection is in good