JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

    <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li>

</ul>

CSS

li { display: inline; }

JavaScript

var lis = $('li'),
    length = lis.length, i, j = 0;

// conditional with fixed arguments (works in all browsers)
for (i = length - 1; i >= -length; --i) {
    setTimeout((function (i) {
        return function () {
            var newLis;
            if (i === -1) {
                newLis = lis.slice(i);
            }
            else {
                newLis = lis.slice(i, i + 1);
            }
            
            newLis.css('color', i >= 0 ? 'red' : 'blue');
        };
    }(i)), j += 100);
}

// conditional with variable arguments (works in WebKit, not in Gecko)
for (i = length - 1; i >= -length; --i) {
    setTimeout((function (i) {
        return function () {
            lis.slice(i, i === -1 ? undefined : i + 1).css('color', i >= 0 ? 'green' : 'purple');
        };
    }(i)), j += 100);
}

// original function (works in no browsers)
for (i = length - 1; i >= -length; --i) {
    setTimeout((function (i) {
        return function () {
            lis.slice(i, i + 1).css('color', i >= 0 ? 'cyan' : 'black');
        };
    }(i)), j += 100);
}