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.

This might help: http://stackoverflow.com/questions/3066434/fade-out-text-value-inside-of-text-field-using-jquery — Sudhir Bastakoti, Nov 23 '11 at 07:38
I think this Stack question can help you: http://stackoverflow.com/questions/3066434/fade-out-text-value-inside-of-text-field-using-jquery — Irvin Dominin, Nov 23 '11 at 07:41

score 2 · Answer 1 · edited Oct 31 '16 at 17:28

2

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.

edited Oct 31 '16 at 17:28

Avag Sargsyan

2,437
3
28
41

answered Nov 23 '11 at 07:41

KodeFor.Me

13,069
27
98
166

score 1 · Accepted Answer · answered Nov 23 '11 at 07:50

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!

jQuery animate Text value

2 Answers2