JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
    <div id="sf4tube_cs"> 
        <ul style="width: 2914px; position: relative; border: 0px solid red;"> 
            <li style="background-image: url(http://iplaywinner.com/storage/ssf4-images/character-thumbnails/abelthumb.png); width: 78px; height: 130px; float: left; margin: 0 10px 10px 0; cursor: pointer;"> 
                <div style="background-color: white; color: black; width: 21px; height: 16px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; float: right; font-family: arial; padding: 2px 0 2px 1px; font-weight: bold; font-size: 12px; margin: 2px 2px 0 0;"> 
                    1
                </div> 
            </li> 
            <li style="background-image: url(http://iplaywinner.com/storage/ssf4-images/character-thumbnails/adonthumb.png); width: 78px; height: 130px; float: left; margin: 0 10px 10px 0; cursor: pointer;"> 
                <div style="background-color: white; color: black; width: 21px; height: 16px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; float: right; font-family: arial; padding: 2px 0 2px 1px; font-weight: bold; font-size: 12px; margin: 2px 2px 0 0;"> 
                    6            </div> 
            </li> 
            <li style="background-image: url(http://iplaywinner.com/storage/ssf4-images/character-thumbnails/akumathumb.png); width: 78px; height: 130px; float: left; margin: 0 10px 10px 0; cursor: pointer;"> 
                <div style="background-color: white; color: black; width: 21px; height: 16px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; float: right; font-family: arial; padding: 2px 0 2px 1px; font-weight: bold; font-size: 12px; margin: 2px 2px 0 0;"> 
                    7            </div> 
            </li> 
            <li style="background-image:...

CSS

#sf4tube_cs
{
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 537px;
    height: 150px;
}
#sf4tube_cs ul {
    display: block;
    height: 90px;
    /* max width here, for users without javascript */
    width: 4500px;
    padding: 10px 0 0 10px;
    /* removing default styling */
    margin: 0;
    background: url('navigation.png');
    list-style: none;
}

JavaScript

$(function()
    {
        // get our elements for faster access and set overlay width
        var div = $('#sf4tube_cs'), 
            ul = $('#sf4tube_cs ul'),
            ulPadding = 15,
            animating = -1,
            speed = 2;
 
        // get menu width
        var divWidth = div.width();
        var ulWidth = ul.width();
 
        // when user move mouse over menu
        div.mousemove(function(e)
        {
            // figure out whether we need to stop animating, start animating, or do both
            var position = (e.pageX - div.offset().left);
            var thirds = div.width() / 3;
 
            if (thirds >= position)
            {
                if (animating != 1)
                {
                    var oldLeft = ul.offset().left;
                    animating = 1;
                    ul.stop();
                    ul.animate({left: 0}, -oldLeft * speed, 'linear', function(){ animating = -1;});
                    $('#x').html('to zero');
                }
            }
            else if (thirds * 2 >= position)
            {
                if (animating != -1)
                {
                    if (animating == 1)
                    {
                        var l = ul.position().left + 20;
                        if (l > 0) l = 0;
                    }
                    else
                    {
                        var l = ul.position().left - 20;
                        if (l < -(ulWidth - divWidth)) l = -(ulWidth - divWidth);
                    }
 
                    animating = -1;
                    ul.stop();
                    ul.animate({left: l}, 500, 'linear', function(){ animating = -1;});
                    $('#x').html('do nothing');
                }
            }
            else
            {
                if (animating != 2)
                {
                    var newLeft = divWidth - ulWidth,
                        oldLeft = ul.offset().left;
                    animating = 2;
           ...