Animated color text with JQuery

EDITED

I have been looking for solutions, trying to make it, but I cant do it... Is it possible to make this?

   <button>Button</button>
    <div id='myDivId'>
        <div class="progress"></div>
        <div class="content">
            DIV
        </div>
    </div>

$("button").click(function(){ 
      $('.progress').animate({ width: '100%' }, 10000);
});

#myDivId{background:red; color:white; padding:10px; overflow:hidden; position:relative;}
.content{
    z-index:9;
    position:relative;
}
.progress{
    z-index;1;
    width:0px;
    height:100%;
    position:absolute;
    background:blue;
    left:0px;
    top:0px;
}

Demo

But instead of using a background-color, change dinamically the colour of a text...