Question 401589 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Transition for changing text on a website

On my website I have a part for showing some data. This is hooked up to a button to load other data when pressed. The elements stay the same, but the text inside the spans is changed to show the data. I’ve noticed that just changing the texts and numbers looks a little boring, so I was looking for something like an animation for changing the text. Something like the CSS transition argument, but for changing text. From my own research I did not find anything suiting my needs, maybe one of you has some code to share. I have in mind something like the text going away to the side with the new text coming in from the other side. Hard to explain what I mean, without having something to show.

Here is a rough example of how I currently replace the text with jquery:

$("#span-1").text("new text");

I tried creating a new class, giving it the transition property and on text change, change the class of the element, then change the text and change back the class after a timeout for the transition, but the text still changed immediatly.

CSS:

.text {
    transition: all 1s ease;
    /* other properties */
}

.text-transition {
    transition: all 1s ease;
}

JS:

$("#span-1").text("New Text");
$("#span-1").removeClass("text");
$("#span-1").addClass("text-transition");
setTimeout(() => {
    $("#span-1").removeClass("text-transition");
    $("#span-1").addClass("text");
}, 1000);

This is roughly what I tried, I also tried switching around the orders a bit, you get the idea.

Tags:

2

Answers


  1. 0

    Still not 100% sure what you’re looking for, but here’s one approach:

    .container {
  display: flex;
  position: relative;
  width: 100px;
  height: 40px;
  overflow: hidden;
  background-color: gray;
  border-radius: 6px;
  padding: 0px 20px 0px 20px;
}

.original-text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  width: 100%;
  height: 40px;
  transition: all .5s;
}

.new-text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 100px;
  width: 100%;
  height: 40px;
  transition: all .5s;
}

.container:hover > .original-text {
  left: -100%;
}

.container:hover > .new-text {
  left: 0px;
}
    <div class="container" style="display: flex; position: relative; width: 100px; height: 40px; overflow: hidden;">
    <div class="original-text">Original Text</div>
    <div class="new-text">New Text</div>
</div>

    In this example I have static text and the class transition is loaded on hover, but you can update it so that when the data is loaded you could set the text of the .new-text div to that loaded data, and then you could update the left value directly or add a class that has that info. Alternatively you could add another wrapper div around the original-text and new-text divs and set the left transition on that wrapper instead of original-text and new-text divs, so that you only need to update class for one element (with the downside being that the DOM has an extra element.)

    Let me know if this is what you had in mind, or if there are adjustments you were looking at.

    Login or Signup to reply.
  2. 0
    • Created an array of texts: const texts = ["Old Text", "First New Text", "Second New Text", "Third New Text"];.
    • Tracked the current text index: let currentIndex = 0;.
    • On button click:
      1. Fade out the current text by adding a fade-out class.
      2. After the transition, updated the text to the next in the array: span.textContent = texts[currentIndex];.
      3. Incremented the index with wrapping: currentIndex = (currentIndex + 1) % texts.length;.
      4. Fade in the new text by removing the fade-out class.
    const texts = ["Old Text", "First New Text", "Second New Text", "Third New Text"];
let currentIndex = 0;

const loadTextBtn = document.getElementById('loadText');

loadTextBtn.addEventListener('click', function () {
    const span = document.getElementById('span-1');

    span.classList.add('fade-out');

    setTimeout(() => {
        currentIndex = (currentIndex + 1) % texts.length;

        span.textContent = texts[currentIndex];

        span.classList.remove('fade-out');
    }, 1000);
});
    .text {
    opacity: 1;
    transition: opacity 1s ease;
}

.fade-out {
    opacity: 0;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <title>New Text Animation</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div>
        <span id="span-1" class="text">Old Text</span>
    </div>
    <div>
        <button id="loadText" type="button">Get New Text</button>
    </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search