JSFiddle - React, Tailwind, and code Playground
HTML
<button id="swell">
Swell
</button>
<table id="aaa">
</table>
CSS
tr { transition: background-color linear 0.2s; }
tr.a { color: red; }
tr.b { color: green; }
tr.high { background-color: blue; }
JavaScript
// Irgendein Tabellengrid aufbauen
cells = "<td>(o)</td>"; cells += cells; cells += cells; cells += cells; cells += cells;
rows1 = "<tr class='a'>"+cells+"</tr>"; rows1 += rows1; rows1 += rows1;
rows2 = "<tr class='b'>"+cells+"</tr>"; rows2 += rows2; rows2 += rows2;
$("#aaa").append(rows1);
$("#aaa").append(rows2);
$("#aaa").append(rows1);
$("#aaa").append(rows2);
document.getElementById("swell").addEventListener("click", function(evt) {
var count=3, wait=240;
var $sel = $("#aaa .a");
var setHigh = function() {
$sel.addClass("high");
setTimeout(setLow, wait);
};
var setLow = function() {
$sel.removeClass("high");
if (count-- > 0) setTimeout(setHigh, wait);
};
setHigh();
});