JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li class="bounce"><a href="#">Home</a></li>
        <li class="bounce"><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li class="bounce"><a href="#">Contact Us</a></li>
    </ul>
</nav>

CSS

nav ul{
    padding-top:20px;
}

nav ul li{
    border: 1px dotted;
    display:block;
    float:left;
}

JavaScript

(function($) {
    $.fn.exBounce = function(callback) {
        this.delay(500).effect("bounce", {
            direction: 'down',
            times: 1
        }, 200, function() {
            // make sure the callback is a function
            (typeof callback == 'function') && callback();

        });
    };


    function animatebounce() {
        var $bouncingEls = $(".bounce");
        var $bouncingElsReversed = $($bouncingEls.get().reverse());
 
        //iterate elements 
        var bounce = function(callback) { 
            var c = false;
            var t = $bouncingEls.length-1;
            
            $bouncingEls.each(function(i) {
                
                //if it is the last element run pass the callback
                if(t==i  && typeof callback == 'function'){
                    c = callback;
                }
                
                $(this).delay(300* i).exBounce(c);
            });
        };

        //iterate elements backwards
        var bounceBackwards = function() { 
            $bouncingElsReversed.each(function(i) {
                $(this).delay(300* i).exBounce();
            });
        }
        
        //call bounce and pass bounceBackwards as callback
        bounce(bounceBackwards);
};



$(document).ready(function() {
    animatebounce();
});


})(jQuery);