Estudo com animação

by edgardleal

HTML

<table border="2">
    <thead>
        <tr>
            <th>Loja</th>
            <th>Status</th>            
        </tr>
    </thead>
<tr>
    <td>
        <div id="x">XXXXXXXXXX</div>
        
    </td>
    <td>Campo</td>
</tr>    
    <tr>
        <td contenteditable="true">AAAAA</td>
        <td>Ok</td>
    </tr>
    <tr>
        <td contenteditable="true">&nbsp;</td>
        <td contenteditable="true"></td>
    </tr>
</table>

CSS

#x {
    
    width:100px;
    height : 20px;
    border : solid 1px;
    position : relative;
    background : #00FF00
}

td {
    -moz-appearance: textfield;
    /* -webkit-appearance: textfield; */
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;      
}

JavaScript

var i = 0;
var green = 0;
setInterval(function(){
$('#x').css('opacity', '0.111').animate({
    backgroundColor : 'rgb(255,0,0)',
    opacity : 1,
    //width : 150,
    color : '#FFFFFF'
},{
    step : function(now, fx){
     //   fx.elem.innerHTML = ++i;
       console.log(now);
    }

},3000);
}, 4000);