Leveraging JavaScript to incorporate smooth transitions like fade in and fade out during text changes

Question

Leveraging JavaScript to incorporate smooth transitions like fade in and fade out during text changes

Below is my JavaScript code that switches between 2 words every 2.5 seconds. I want to enhance the transition between the words by adding a fading effect using jQuery. How can I integrate this into the recursive function? Any suggestions?

var text = ["first", "second"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 2500);

function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
  }
}

.banner-right h2 {
  font-size: 50px;
  font-weight: 300;
  color: #ffffff;
  margin: 15px 0 45px 0;
}

<h2 id="changeText">Data Scientist</h2>

javascript jquery html css

Answer 1

Answer №1

If you're working with Vanilla JavaScript, an effective approach would be utilizing CSS transitions and the classList property.

Here's an example implementation:

CSS

#updateText {
    opacity: 1;
    transition: opacity 0.5s;
}
.hide {
    opacity: 0 !important;
}

JavaScript

function updateContent() {
    element.classList.add('hide');
    setTimeout(function () {
        element.innerHTML = content[counter];
        element.classList.remove('hide');
        counter++;
        if (counter >= content.length) {
            counter = 0;
        }
    }, 500);
}

Live Example:

var content = ["first", "second"];
var counter = 0;
var element = document.getElementById("updateText");
setInterval(updateContent, 2500);

function updateContent() {
    element.classList.add('hide');
    setTimeout(function () {
        element.innerHTML = content[counter];
        element.classList.remove('hide');
        counter++;
        if (counter >= content.length) {
            counter = 0;
        }
    }, 500);
}

#updateText {
    opacity: 1;
    transition: opacity 0.5s;
}
.hide {
    opacity: 0 !important;
}

<h2 id="updateText">Web Developer</h2>

Please note: The use of !important in the CSS is necessary here as opacity: 1; with an ID selector takes precedence over a class selector.

Answer 2

If you're working with Vanilla JavaScript, an effective approach would be utilizing CSS transitions and the classList property.

Here's an example implementation:

CSS

#updateText {
    opacity: 1;
    transition: opacity 0.5s;
}
.hide {
    opacity: 0 !important;
}

JavaScript

function updateContent() {
    element.classList.add('hide');
    setTimeout(function () {
        element.innerHTML = content[counter];
        element.classList.remove('hide');
        counter++;
        if (counter >= content.length) {
            counter = 0;
        }
    }, 500);
}

Live Example:

var content = ["first", "second"];
var counter = 0;
var element = document.getElementById("updateText");
setInterval(updateContent, 2500);

function updateContent() {
    element.classList.add('hide');
    setTimeout(function () {
        element.innerHTML = content[counter];
        element.classList.remove('hide');
        counter++;
        if (counter >= content.length) {
            counter = 0;
        }
    }, 500);
}

#updateText {
    opacity: 1;
    transition: opacity 0.5s;
}
.hide {
    opacity: 0 !important;
}

<h2 id="updateText">Web Developer</h2>

Please note: The use of !important in the CSS is necessary here as opacity: 1; with an ID selector takes precedence over a class selector.

Answer 3

Answer №2

Switch out the following:

elem.textContent = text[counter];

For:

$(elem)
    .fadeOut(400)
    .html(text[counter])
    .delay(400)
    .fadeIn(400);

Answer 4

Switch out the following:

elem.textContent = text[counter];

For:

$(elem)
    .fadeOut(400)
    .html(text[counter])
    .delay(400)
    .fadeIn(400);

Leveraging JavaScript to incorporate smooth transitions like fade in and fade out during text changes

Answer №1

Live Example:

Answer №2

Similar questions

Overriding makeStyles CSS in Material UI Styling

Creating vibrant squares using HTML and CSS

Bring in d3 from unpkg

Having trouble with Simplemodal showing link content in the modal window

Specific phrase enclosed within div element

Having trouble retrieving the second parent of my input element using jQuery

Establishing Routing for Angular within an ASP.NET Web API 2 application

Padding has an impact on the widths of flexbox items

Difficulty comprehending the fallback for JSON.parse in jQuery.parseJSON

Oops! There was an unexpected error: TypeError - It seems that the property 'title' cannot be read because it is undefined

Generating random numbers within specified character limits using Javascript and Selenium

Accordion jQuery failing to display tabs

Utilize discord.js to create commands with multiple arguments

Error: Encountered an unexpected token within the node_modules/aws-iot-device-sdk/thing/index.js file

Hey there, what exactly does 'TypeError: Cannot access the 'scopedFn' property of an undefined object' mean?

Activate anchor classes in several anchor link menus simultaneously

Is there a faster alternative to using jQuery's indexOf method?

Unable to center text in a Bootstrap 4 div

Unable to retrieve the user ID from a Discord username using Discord JS

The Facebook like button disappears after being used just once