animate textarea content

Question

I have a paragragh of user entered text in a textarea.

line1
line2
line3

intially all text would be black when a button is pressed each line's color changes to red gradually (2 sec each line)

can this be done with only jquery?

Answer 1

EDIT: Sorry again mate didn't realize you said TEXTAREA this time.

No it cannot be done. However you could do this:

When the button is pressed hide the textarea and display a div in it's place with the content from the textarea. Perform the animation on that instead. Of course it wouldn't be editable anymore but as I don't know what you are trying to achieve this could be a work-around.

Here's an example of above.

<textarea id="ta"></textarea>
<div id="ta_div" style="display:none;"></div>
<br/><input type="button" id="go" value="Go"/>

<script>
$("#go").click(function()
{
    var text = document.getElementById("ta").value;
    text = "<p>" + text.replace( /\n/g, "</p><p>" ) + "</p>";

    $("#ta_div").html( text );
    $("#ta").hide();
    $("#ta_div").show();

    var i = -1;
    var arr = $("#ta_div p");
    (function(){
    if(arr[++i])
    $(arr[i]).animate({ color: "#ff0000" }, 2000, "linear", arguments.callee)
    })();
});
</script>