Demo jQuery Bug #9222

Blinks at the end of the opacity animation.

HTML

<div id="wrapper">    
    <div id="tickets">
        <table id="tickets_table">
            <thead>
                <tr>
                    <th>FOOo</th>
                    <th>BARr</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>foo</td><td>bar</td></tr>
                <tr><td>foo</td><td>bar</td></tr>
                <tr><td>foo</td><td>bar</td></tr>
            </tbody>
        </table>
    </div>
</div>

CSS

body {
    background: none repeat scroll 0 0 #ABB3EF;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    color: #505362; 
    padding: 0;
    margin: 0;
}

#wrapper {
    background: none repeat scroll 0 0 #C7CFF4;
    padding: 15px;
    margin: 25px;
    border: 1px solid #fff;
}

#tickets_table {
    border: 1px solid #fff;
}

#tickets_table th {
    background-color: #ABB3EF;
    font-weight: bold;
    color: #000;
}

#tickets_table tbody tr:nth-child(even) td {
    background: #fff;
}

#tickets_table tbody tr:nth-child(odd) td {
    background: #eee;
}

JavaScript

function flashyBug() {
    var trs = document.getElementsByTagName("tr"),
        i, tr;
    for (i = 0; tr = trs[i]; i++) {
        (function(elem) {
            setTimeout(function() {
                // set opacity to non-zero
                elem.style["opacity"] = 0.9;
            }, 20);
            setTimeout(function() {
                // then set it back to 1 and watch the background color disappear except behind the text
                elem.style["opacity"] = 1;
            }, 40);
        })(tr);
    };
}

setInterval(flashyBug, 3000);