jQuery animate Текстовое значение

Question

У меня есть ввод html

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

Можно ли анимировать значение этого ввода текста (т.е. затухание, скрытие и т. Д.)

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

Вместо создания $(this).attr("value","") Я хочу, чтобы часть этого текста исчезла с такой анимацией, как затухание или скрытие.

Answer 1

Проблема не может быть решена так, как вы ее описали.

Единственное решение - наложить элемент (то есть: span) на текстовое поле с точно таким же размером, а затем поместить в него текст.

На следующем шаге вы можете сделать возможной любую анимацию для этого HTML-элемента, а после завершения эффекта вернуть фокус текстовому элементу.

Answer 2

Если вы используете jQuery UI , вы можете анимировать цвет.Если вы хотите использовать только jQuery , то использование функции animate непосредственно для цвета нецелесообразно.Этот кусок кода должен работать, если вы можете использовать jQuery UI:

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

Fiddle здесь: http://jsfiddle.net/Q63jc/

Удачи!