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

If using jQuery UI is an option you can animate the color. If you only want to use jQuery then using the animate function on color directly is not an option. This piece of code should work if you can use jQuery UI:

$("#myInput").animate({
    color:'#FFFFFF'
},2000);

Fiddle here: http://jsfiddle.net/Q63jc/

Good luck!