JSFiddle - React, Tailwind, and code Playground

HTML

<div id="state-wrapper" style="width:700px;overflow:hidden;position:relative;">
    <div id="state-holder" style="position: relative;">
    <div id="uistate1" style="width:699px;">
        <div id="questionsPlaceHolder" style="overflow: hidden; min-height: 300px;">
        <table id="whatever" style="background-color: red; width:50px;height:50px;display:none;" border="1">
            <tr><td>Name</td></tr>
            <tr><td>Kris</td></tr>
            <tr><td>Bill</td></tr>
            <tr><td>Steve</td></tr>
            </table>
        </div>
    </div>
    </div>
</div>
<input type="button" id="btnTest" value="Slide Baby Slide" />

JavaScript

$(document).ready(function() {
    $("#btnTest").click(function() {
        $("#state-holder").slideBabySlide(function() {});
    });
   
});
    
$.fn.slideBabySlide = function(callback) {
    return this.each(function() {
        var $this = $(this);

        $this.animate({ opacity: 0, left: '-700px' }, 200, function() {
  

            $(this).css("left", 700);

            $("#whatever").show();
            
            $(this).animate({ opacity: 1, left: '0px' }, 300, function() {
    
                if ($.isFunction(callback)) callback();
            });
        });
    });
};