将val（）与jquery一起使用//与jquery一起消失的输入文本

Question

我有一个输入框，我想要一个文本消失。 谷歌搜索之后，我在这里找到了一个不错的解决方案： 使用jQuery在文本字段中淡出文本值

但是，由于某种原因，它不适用于我的代码：

$(document).ready(function(){
  var input = $("#textboxid").val()
  input.animate({color:'white'},1000, function(){
    $(this).val('').css('color','black');
  }
});

你能告诉我我错了吗？ 谢谢

编辑：用户输入内容后，该文本应消失。

Answer 1

val（）获取文本框的值 ，即在其中写入的内容。 这是一个字符串。 您不能为字符串设置动画，可以为jQuery对象设置动画。

不要使用$("#textboxid").val() ，只需使用$("#textboxid") 。

编辑：

我仅使用CSS3就做到了。 这不需要任何库，并且已硬件加速。

 $("button").click(function() { $("input").css("color", "white"); }); 

 input { -webkit-transition: all 1s linear; transition: all 1s linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input value="some value"/> <button>Fade it away</button> 

Answer 2

脚本中存在一些语法错误：

$(document).ready(function () {
    var input = $("#textboxid"); //you have to use the object here and not the value-string
    input.animate({
        color: '#FFF'
    }, 1000, function () {
        $(this).val('').css('color', 'black');
    }); //the bracket was missing here
});

演示版

此外，jQuery不支持颜色属性的动画。 有关更多信息，请参见此处 。

有关包含的jQuery-UI库的动画，请参见此演示 。

参考

.animate