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;
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);
}