Is there a way to create a sequence where text fades in only after the previous text has completely faded out?

Question

Is there a way to create a sequence where text fades in only after the previous text has completely faded out?

Currently, I am using JQuery to create a continuous slideshow of text values. However, after some time, multiple texts start to display simultaneously, indicating a timing issue. Even when hidden, the problem persists. My code includes 3 strings of text.

<h3 class="s1" style="display:none;"> ONE! </h3>
<h3 class="s2" style="display:none;"> TWO! </h3>
<h3 class="s3" style="display:none;"> THREE! </h3>

The function in my code looks like this:

setInterval(function(){
    $(".s1").fadeIn(1000);
    $(".s1").fadeOut(1000,function(){
        $(".s2").fadeIn(1000);
        $(".s2").fadeOut(1000,function(){
            $(".s3").fadeIn(1000);
            $(".s3").fadeOut(1000); });
    }); },6000);

Initially, the script works smoothly but after a while (around 30 seconds or more), the strings start overlapping. Ideally, the output should look like:

0:01 --> ONE!
0:02 -->
0:03 --> TWO!
0:04 -->
0:05 --> THREE!
0:06 -->
0:07 --> ONE!

However, what actually happens is something like:

0:01 --> ONE!
0:02 -->
0:03 --> TWO!
0:04 -->
0:05 --> THREE!
         ONE!
0:06 -->
0:07 --> TWO!
         ONE!
...  --> ONE!
...  --> TWO!
...  --> THREE!

How can I modify the code so that each string appears only after the previous one has disappeared completely?

javascript jquery html css

Answer 1

Answer №1

UPDATE: I overlooked the last requirement in your question about fading only once the other has faded. I have made the necessary changes to reflect this.

Just like there are multiple ways to approach a problem, there are different methods to achieve the desired outcome. Although I am not entirely sure of the context of your project, the following solution may offer some flexibility and scalability:

.js

var vl = [];

vl.interval = 1000;
vl.fadeSpd = 300;
vl.slide = $('.slider .slide');
vl.cntSlides = vl.slide.length;

function startSlider() {
    setInterval( function() {
        changeSlide();
    },vl.interval);
}

function getNextSlide() {
    active = $('.slider .active').index();
    if(active == (vl.cntSlides - 1)) {
        nextSlide = 0;
    } else {
        nextSlide = active + 1;
    }
    return nextSlide;
}

function changeSlide() {
    nextSlide = getNextSlide();
    $('.slider .active').fadeOut(vl.fadeSpd).removeClass('active');
    setTimeout( function() {
        vl.slide.eq(nextSlide).fadeIn(vl.fadeSpd).addClass('active');
    },vl.fadeSpd);
}


startSlider();

The code allows for the addition of new items or slides without the need for extensive modifications. The slider initiates with 'startSlider', defining the interval time. 'changeSlide()' facilitates the transition between slides, determining the next slide and handling the fade animations.

.css

.slider {
    position: relative;
    text-align: center;
    width: 300px;
}
.slide {
    position: absolute;
    display: none;
    width: 100%;
    top: 0;
    left: 0;
}
.active {
    display: block;
}

The CSS styling positions each item on top of one another within a relative container such as 'slider'. Modify the container's dimensions as needed; in this example, a width of 300px is utilized. Additional styling options can be explored to customize the slider further!

Main Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
    <h3 class="slide active">One!</h3>
    <h3 class="slide">Two!</h3>
    <h3 class="slide">Three!</h3>
</div>

Introducing the container ensures that the stacked slides maintain their positioning parameters. Feel free to adjust the layout based on your requirements.

I hope this information proves useful for your project. While it may not directly address your specific needs, others might find value in these insights. Enjoy experimenting with the functionalities! :)

Answer 2

UPDATE: I overlooked the last requirement in your question about fading only once the other has faded. I have made the necessary changes to reflect this.

Just like there are multiple ways to approach a problem, there are different methods to achieve the desired outcome. Although I am not entirely sure of the context of your project, the following solution may offer some flexibility and scalability:

.js

var vl = [];

vl.interval = 1000;
vl.fadeSpd = 300;
vl.slide = $('.slider .slide');
vl.cntSlides = vl.slide.length;

function startSlider() {
    setInterval( function() {
        changeSlide();
    },vl.interval);
}

function getNextSlide() {
    active = $('.slider .active').index();
    if(active == (vl.cntSlides - 1)) {
        nextSlide = 0;
    } else {
        nextSlide = active + 1;
    }
    return nextSlide;
}

function changeSlide() {
    nextSlide = getNextSlide();
    $('.slider .active').fadeOut(vl.fadeSpd).removeClass('active');
    setTimeout( function() {
        vl.slide.eq(nextSlide).fadeIn(vl.fadeSpd).addClass('active');
    },vl.fadeSpd);
}


startSlider();

The code allows for the addition of new items or slides without the need for extensive modifications. The slider initiates with 'startSlider', defining the interval time. 'changeSlide()' facilitates the transition between slides, determining the next slide and handling the fade animations.

.css

.slider {
    position: relative;
    text-align: center;
    width: 300px;
}
.slide {
    position: absolute;
    display: none;
    width: 100%;
    top: 0;
    left: 0;
}
.active {
    display: block;
}

The CSS styling positions each item on top of one another within a relative container such as 'slider'. Modify the container's dimensions as needed; in this example, a width of 300px is utilized. Additional styling options can be explored to customize the slider further!

Main Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="slider">
    <h3 class="slide active">One!</h3>
    <h3 class="slide">Two!</h3>
    <h3 class="slide">Three!</h3>
</div>

Introducing the container ensures that the stacked slides maintain their positioning parameters. Feel free to adjust the layout based on your requirements.

I hope this information proves useful for your project. While it may not directly address your specific needs, others might find value in these insights. Enjoy experimenting with the functionalities! :)

Is there a way to create a sequence where text fades in only after the previous text has completely faded out?

Answer №1

.js

.css

Main Page

Similar questions

Maintain the central alignment of the entire page (including the horizontal scrollbar) while zooming in

When using jQuery without $.ajax, the combination of $.POST and json functions will return "null" when retrieving data from PHP's json_encode

How can the id of the parent element be retrieved within this function?

Utilizing ng-repeat, filter, and the uib-popup-datepicker to refine and display specific data within a table column

Pass an array of files from a Jquery ajax request to a controller action

Effortless code formatting with VS Code for TypeScript and JavaScript

Trouble with jQuery script causing initial word count issue in textarea upon page load

Having trouble retrieving user data that is being passed as a context value using React's useContext

Unlocking the Secrets of Launching a Modal with Javascript

Passing an object in an ajax call to a function: a comprehensive guide

What is the best way to automatically assign a class attribute to all form widgets in Django?

What is the reasoning behind the presence of hidden elements on the Google Search Result Page?

Using Javascript within AEM to update a class upon checkbox selection

Having issues with handling ajax response in a Node.js application?

What are the recommended methods for updating data using mongoose?

Is it possible to use jQuery to identify when an item is located on a new line within a textarea?

Exploring the functionalities of Stripe's latest Search API integrated with metadata features

Is the provided code snippet considered a function-statement, function-expression, and function-expression-statement?

Customize the Kendo UI by integrating it with HTML tables and dropdown lists

Error message in Ionic 2: "Property is not found on type"