JSFiddle - React, Tailwind, and code Playground

by mufid

HTML

<ul>
    <li>Ini mainan baru</li>
    <li>Untuk PPW</li>
    <li>Buat share code</li>
    <li>dan mengujinya</li>
    <li>Keren yah LOL</li>
</ul>

<button>ulangi</li>

CSS

li {
  background: #cdcdcd;
  font-family: "Segoe UI", Arial;
  font-size: 46px;
  text-align: center;
  padding: 20px;
  position: absolute;
}

JavaScript

// =======================================
//             ANIMATOR.JS
// =======================================
// 
// Coba coba fiddle ini:
// -> tambah elemen di dalam <li>.
// -> ubah-ubah paramater ini
      var lamanya_nongol = 4000;
//    waktu dalam milisecond ^
// -> pencet Run di atas, dan lihat hasilnya :3
// -> selamat bermain dengan fiddle :3
//
// =======================================
//
//

var elemen = $('li').first();
var asik = $('li').css({'display' : 'none'});

var animasi = function() {
    console.log('it works!');
    if (elemen.prev().length > 0) {    
        elemen.prev().fadeOut('slow', function() {
            if (elemen.next().length === 0) {
                elemen.fadeIn('slow', function() {
                     setTimeout(
                          function() {elemen.fadeOut('slow', function() {
                              $('button').fadeIn('slow'); });
                    }, 4000);
                });
            } else {
                elemen.fadeIn('slow');
                elemen = elemen.next();
                setTimeout(animasi, lamanya_nongol);
        }
    });}
    else {
        elemen = elemen.next();
        setTimeout(animasi, lamanya_nongol);
    }
};

$('button').hide();
elemen.css({'display' : 'block'});
animasi();

$('button').click(function() {
    $('button').fadeOut();
    elemen = $('li').first();
    elemen.fadeIn('slow');
    animasi();
}
);