Jquery animation to change text of a div

Question

I have a responsive layout and one of the elements of a ROW is a text/paragraph that I want you to exchange every 5 seconds for another paragraph, for example.

I have the following function to move the contents of the div

    function moverTexto(){

        $('#descricao').animate({left:"-800" },1000)

    }

in main I have:

    <section id="meio"> 

        <div class="container">

                    <div class="row">


                            <div id = "descricao" class="col-sm-12 col-lg-6" >

                                 <p> <strong style="font-size: 50px; ">SER</strong> bla bla bla: <strong style="color:#c8270a;font-weight:800;"> SABEDORIA </strong>,<strong style="color:#ecb213;font-weight:800;"> EMPATIA </strong> e <strong style="color:#0c5f93;font-weight:800;"> RESPEITO </strong>.

                                <p> bla bla bla  </p>  

                                <p> bla bla bla </p>

                                <p> bla bla bla </p>



                            </div>


                            <div class="col-sm-12 col-lg-6" >
                                <img class="img-fluid" src="img/arte.jpg">
                            </div>



                    </div>

I would like a paragraph element to appear at a time in the Write div every X seconds, type rotating from first to last, then back to first. And that’s right next to the photo in the other div.

Answer 1

First, CSS tb is math! But don’t be alarmed, I’ll explain the details.
Second, you don’t need JS or jQuery...

As you commented, we will have 5 elements where each 1 is 5s on the screen. Soon we will have 5x5 = 25, so our animation has to have 25 seconds.

Now let’s take our animation that goes from 0 to 100% and divide by 5, because it’s 5 intervals of 5s, this tells us that every 20% of the animation corresponds to 5s.

This means that from 0 to 20% my element stays on the screen, completing 5s, then it passes the rest of the hidden animation. So every 5s appears the next element.

The estate animation-delay will prevent the animation of the elements from starting at the same time. So each element you have to increase 5s in the delay, the second element has delay of 5s, third has delay 10s, room 15s etc...

So you get the desired result. Run the code below to see
I left the comments in the code

.texto {
    font-size: 3rem;
    font-weight: bold;
    position: absolute;
    opacity: 0;
    animation: fader 25s infinite;
}
/* cada texto tem um delay de 5 + o valor do delay anterior, meno o primeiro */
.a {
    animation-delay: 0s;    
}
.b {
    animation-delay: 5s;
}
.c {
    animation-delay: 10s;
}
.d {
    animation-delay: 15s;
}
.e {
    animation-delay: 20s;
}

/* Animação acontece apenas entre 0 e 20%, pois são 5 elementos */
@keyframes fader {
    10% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
}

.anima {
    height: 100px;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />

<section id="meio">

    <div class="container">

        <div class="row">

            <div id="descricao" class="col-sm-12 col-lg-6">

                <p> <strong style="font-size: 50px; margin-botton:100px;">
                    SER</strong> bla bla bla: <strong style="color:#c8270a;font-weight:800;">
                        SABEDORIA </strong>,<strong style="color:#ecb213;font-weight:800;"> EMPATIA </strong> e
                    <strong style="color:#0c5f93;font-weight:800;"> RESPEITO </strong>
                </p>

                  <div class="anima">
                      <p class="texto a">Texto item 1</p>
                      <p class="texto b">Texto item 2</p>
                      <p class="texto c">Texto item 3</p>
                      <p class="texto d">Texto item 4</p>
                      <p class="texto e">Texto item 5</p>
                  </div>
            </div>

            <div class="col-sm-12 col-lg-6">
                <img class="img-fluid" src="https://placecage.com/100/100">
            </div>

        </div>
    </div>
</section>