jQuery animate Text value

Question

I have html input

<input id="txtSearch" value="Search..." type="text"/>

Is it possible to animate the value of this text input (i.e fadeout, hide, etc..)

    $("#txtSearch").focusin(function () {
        $(this).animate({ opacity: "1", left: "-=100px", width: "+=100px" }, 1000, function () {
            $(this).attr("value", "");
        });
    });

Instead of making $(this).attr("value","") i want to make the vlaue of this text disappear away with an animation like fadeout or hide.

Answer 1

The problem cannot be solved as you described it.

The only solution is to overlay an element (ie: span) over the text field, with exact same size and then put your text into that.

In later step you can make any animation possible to that html element and after effect is completed give the focus back to the text element.