changing text with different duration in javascript

Question

Hello stackoverflow community,

my goal is to create changing text with different duration, meaning that there are certain "markers" or sentences which stay longer then the 2 seconds I have now as of now. Also, I would like the animation to stop after all the list entries have been displayed.

Here is the code I have for now:

http://jsfiddle.net/eu8L01nv/

Javacript:

    var terms = $("ul li");

    function rotateTerm() {

     var ct = $("#rotate").data("term") || 0;

     console.log(terms.eq([ct]).text());

      $("#rotate").data("term", 
        ct == terms.length -1 ? 0 : ct + 1).text(terms.eq([ct]).text())
      .fadeIn().delay(2000).fadeOut(200, rotateTerm);

    }
    $(rotateTerm);

HTML

    <p><span id="rotate">default</span></p>

    <ul style="display:none">
        <li>This is sentence number one.</li>
        <li>That is sentence number two.</li>
        <li>This is another sentence.</li>
        <li>Another sentence.</li>
    </ul>

Thank you!

thealpha93 · Accepted Answer · 2020-05-29 08:46:32Z

1

I hope this solves the issue:

I added this piece of code to it: ct < terms.length -1 && rotateTerm. so that it won't call rotateTerm function after the last element

And I have added a timeDelay array var timeDelay = [1000, 2000, 4000, 8000] to enable different time delays for different sentences.

var terms = $("ul li");

    function rotateTerm() {

     var timeDelay = [1000, 2000, 4000, 8000];
     var ct = $("#rotate").data("term") || 0;
     console.log(terms.eq([ct]).text());
     console.log(ct)
      $("#rotate").data("term", 
        ct == terms.length -1 ? 0 : ct + 1).text(terms.eq([ct]).text())
      .fadeIn().delay(timeDelay[ct]).fadeOut(200, ct < terms.length -1 && rotateTerm);

    }
    $(rotateTerm);

Or you could set the delay depending upon the length of the text

var terms = $("ul li");

function rotateTerm() {

  var ct = $("#rotate").data("term") || 0;
  const text = terms.eq([ct]).text()
  const textLength = text.length;
  console.log(textLength)
  const timeDelay = textLength < 50 ? 2000 : textLength * 50
  $("#rotate").data("term",
      ct == terms.length - 1 ? 0 : ct + 1).text(text)
    .fadeIn().delay(timeDelay).fadeOut(200, ct < terms.length - 1 && rotateTerm);

}
$(rotateTerm);

edited May 29, 2020 at 8:46

answered May 29, 2020 at 6:37

thealpha93

7864 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moritz Wehr Over a year ago

Thank you, that helps me already a lot! Do you also know if there is any way to display some sentences longer, maybe be creating some unique list elements?

thealpha93 Over a year ago

yes. I have updated the answer as per your requirement. Hope it helps

Collectives™ on Stack Overflow

changing text with different duration in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related