Halo komunitas stackoverflow,

Tujuan saya adalah membuat teks yang berubah dengan durasi yang berbeda, artinya ada "penanda" atau kalimat tertentu yang bertahan lebih lama dari 2 detik yang saya miliki sekarang seperti sekarang. Juga, saya ingin animasi berhenti setelah semua entri daftar ditampilkan.

Berikut adalah kode yang saya miliki untuk saat ini:

http://jsfiddle.net/eu8L01nv/

Javascript:

    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>

Terima kasih!

1
Moritz Wehr 29 Mei 2020, 09:00

1 menjawab

Jawaban Terbaik

Saya harap ini menyelesaikan masalah:

Saya menambahkan potongan kode ini ke dalamnya: ct < terms.length -1 && rotateTerm. sehingga tidak akan memanggil fungsi rotateTerm setelah elemen terakhir

Dan saya telah menambahkan array timeDelay var timeDelay = [1000, 2000, 4000, 8000] untuk mengaktifkan penundaan waktu yang berbeda untuk kalimat yang berbeda.

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);

Atau Anda dapat mengatur penundaan tergantung pada panjang teks

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);

1
thealpha93 29 Mei 2020, 08:46