Question

我有一个输入框，我希望文本消失。谷歌搜索后我找到了一个很好的解决方案： Fade out text value inside of text field using 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
});

Demo

此外，jQuery不支持color-attribute的动画。有关详细信息，请参阅here。

有关包含jQuery-UI库的动画，请参阅此demo。

<强>参考

.animate

使用带jquery的val（）//输入文本随jquery消失

2 个答案: