How can i use jquerys animate()-function to change the color of a text vertically?

I have a text called "EXAMPLE" which is in color black. Now i want to animate this text in the way to change the color of the EXAMPLE text vertically from bottom to top to 50%, so that the the color of the text is to 50% percent in red and 50% in black. It should be like a progressbar which animates from left ro right, but in my case it should go from bottom to top and not change the background-color, but the text-color itself.

But keep in mind that the percentages could be dynamically so don't want anything hard coded stuff. Is it possible to do that with jquery animate()?