JSFiddle - React, Tailwind, and code Playground

by twinturbotom

HTML

<ul>
    <!--<li><button class='eachMethod'>$.each</button></li>
    <li><button class='ifMethod'>if</button></li>-->
    <li><button class='reset'>Reset</button></li>
    <li><button class='rewind'>Rewind</button></li>
    <li><button class='pause'>Pause</button></li>
    <li><button class='play'>Play</button></li>
    <li><button class='forward'>Forward</button></li>
</ul>
    
<div class='box0'></div>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
<div class='box4'></div>

CSS

div{
 clear: both;   
 background-color: green;
 width: 40px;
 height: 40px;
 Position: relative;

}
ul li {
    float: left;
}

JavaScript

boxes = [
    ['.box0', 'animate', [ {left: '200px' }, 1000 ] ],   
    ['.box1', 'animate', [ {left: '200px' }, 1000 ] ],
    ['.box2', 'animate', [ {left: '200px' }, 1000 ] ],
    ['.box3', 'animate', [ {left: '200px' }, 1000 ] ],
    ['.box4', 'animate', [ {left: '200px' }, 1000 ] ],
    ['div', 'animate', [ {left: '0px' }, 1000 ] ]   
    ];

$('.reset').click( function(){
    animating = false;
    $('div').stop().clearQueue().animate({ left: '0px' });
});
$('.rewind').click( function(){
    animating = true;
    direction = 'rewind';
    animShift();
    //passTest( );
});

$('.pause').click( function(){
    animating = false;
    $('div:animated').stop();
});
$('.play').click( function(){
    direction = 'forward';
    animating = true;
    animShift();

});
$('.forward').click( function(){
    animating = true;
    direction = 'ff';
    animShift();
    //passTest( );
});


function animShift(){
    if (animating != false)
    {
        if (direction == 'rewind' )
        {
            if ( b )
            {
                b = boxes.pop();
                boxes.unshift(b);
                direction = 'forward';
                $.fn[ b[1] ].apply( $( b[0] ), b[2] );
                return    
            }
                    
            return

        }
        else if ( direction == 'ff')
        {
            if ( b )
            {
                b = boxes.shift();
                boxes.push(b); 
                $.fn[ b[1] ].apply( $( b[0] ), b[2] );
                return
            }
                    
            return
        }
        else
        {
            b = boxes.shift();
            boxes.push(b); 

            if ( b )
            {
                $.fn[ b[1] ].apply( $( b[0] ), b[2] ).promise().done( animShift );
            }
        }
    }
};

function passTest( ){
    
    alert( direction );
};

/*
$('.eachMethod').click( animEach );
function animEach(){
    $.each( boxes, function(){
        $.fn[ this[1] ].apply( $(...