Sequential Fading jQuery Text Animation

This code animates text using jQuery, creating a seamless, captivating effect with elegant fades, enhancing user engagement and enriching web design.

Introducing Sequential Fading jQuery Text Animation – where words come alive on your website. With smooth fades and elegant transitions, your text captures attention effortlessly. Elevate your web design, engage visitors, and make a lasting impact. Explore the magic of subtle animation today!

Sequential Fading Text October 8, 2023

Here is the HTML

<div class="intro_text">
      <span>Here jQuery Text Animation 1</span>
      <span>Here jQuery Text Animation 2</span>
      <span>Here jQuery Text Animation 3</span>

jQuery code for functionality

(function ($) {
  "use strict";

  jQuery(document).ready(function ($) {
    //text animation
    const spans = document.querySelectorAll('.intro_text h1 span');
    let index = 0;

    function fadeInNextSpan() {
      spans[index].style.display = 'inline';
      spans[index].style.opacity = 0;
      const fadeInEffect = setInterval(function () {
        if (spans[index].style.opacity < 1) {
          spans[index].style.opacity = parseFloat(spans[index].style.opacity) + 0.02;
        } else {
          setTimeout(fadeOutCurrentSpan, 5000); // Visible time of 5 seconds
      }, 10); // Fading in over 1 second


    function fadeOutCurrentSpan() {
      const fadeOutEffect = setInterval(function () {
        if (spans[index].style.opacity > 0) {
          spans[index].style.opacity = parseFloat(spans[index].style.opacity) - 0.02;
        } else {
          spans[index].style.display = 'none';
          index = (index + 1) % spans.length;
          setTimeout(fadeInNextSpan, 10); // Gap between texts showing (1 seconds)
      }, 10);

    fadeInNextSpan(); // Start the animation loop



We need a little CSS to hide all other text except 1st one

.intro_text h1 span{
  display: none;
.intro_text h1 span:first-child{
  display: block;

Use your creativity to customize your own way. Enjoy!

Previous Code

Customizing WooCommerce Order Numbers with Prefix and Year Suffix

Customize WooCommerce order numbers your way, whet ...

Next Code

WooCommerce Custom Order Dropdown Based on Payment Method

WooCommerce admin order page custom drop-down base ...

Leave a Reply

Your email address will not be published. Required fields are marked *

ten − four =

If you find it useful

Buy me a coffee









Simple jQuery Accordion Collapse

Custom coded Simple jQuery Accordion with toggle a ...

Add Classe when the item visible

Add class on scroll to viewport jquery code ...

Cookie Popup with jQuery

Browser cookies popup accept, store cookies in bro ...

Sticky Menu Show when scrolling up

Header bar only show when scrolling up with simple ...

Jquery Replace specific text in all element