blink problem 2 (css)

by shlomo hassid

HTML

<table>
    <tr id="row35" data-uitval="1" class="">
        <td>
            <button type="button" id="knopje" class="tabeluur" data-uur="35" onclick="check(this)">
                <p>✕</p>
            </button>
        </td>
        <td>
        </td>
    </tr>
</table>
<!-- For testing: -->
<div id='foutmelding'></div>

CSS

.blink p {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

JavaScript

var busy = false;
function check(uurID) {
    if(busy) $('#foutmelding').html('Uw vorige bewerking loopt nog.');
    else uitval(uurID);
}
function uitval(uurID) {
    $(uurID).addClass('blink');
    busy = true;
    $.post(
        'http://fiddle.jshell.net/_display/', 
        { test:'test' }, 
        function() {
            console.log('done POST');
            setTimeout(function(){   
               $(uurID).removeClass('blink');
               busy = false;
            },6000);
        }
    );
}