JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<h1>Simple Autoadvance Demo</h1>

<ul>
</ul>

CSS

li {
    color: #999;
    font-family: Helvetica;
    font-size: 10px;
    margin: 1em;
}

JavaScript

var $ul = $( 'ul' ),
    quotes = [
        'Most men lead lives of quiet desperation.',
        'A life lived in fear is a life half-lived.',
        'Most quotations attributed to Mark Twain are misattributed.',
        'Even though I was their captive, the Indians allowed me quite a bit of freedom. I could walk freely, make my own meals, and even hurl large rocks at their heads. It was only later that I discovered that they were not Indians at all but only dirty-clothes hampers.',
        'Children need encouragement. If a kid gets an answer right, tell him it was a lucky guess. That way he develops a good, lucky feeling.'
    ],
    autoadvance;

function quote() {
    var random = Math.floor( Math.random() * quotes.length );
    
    $( '<li />', {
        text: quotes[random]
    }).appendTo( $ul );
}

$ul.bind( 'mouseenter', function( event ) {
    clearInterval( autoadvance );
});

$ul.bind( 'mouseleave', function( event ) {
    autoadvance = setInterval( quote, 1000 );
});

// Start autoadvance initially
$ul.trigger( 'mouseleave' );