JSFiddle - React, Tailwind, and code Playground

by mynameiswilson

HTML

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    <li>Bop</li>
</ul>
<button id="hide">HIDE</button>
<button id="show">SHOW</button>
<button id="show_queue">SHOW (custom queue)</button>

JavaScript

$('#show').click(function() {
    $('ul li').animate({opacity:1},{duration: 5000, queue: true});
        /*each(function() {
        $(this).animate({opacity:1},{duration: 5000, queue: true});
    }); */
});

$('#show_queue').click(function() {
    var q = $({});
    $('ul li').each(function(i,val) {
        q.queue("foo",function(next) { 
            $(val).animate(
                {opacity:1},2500,next);
        });
    });
    
    q.dequeue("foo");  
        

});

$('#hide').click(function() {
    $('ul li').css({opacity: 0});
});