using val() with jquery // 输入文本在 jquery 中消失答案

【问题标题】：using val() with jquery // input text dissappear with jqueryusing val() with jquery // 输入文本在 jquery 中消失
【发布时间】：2015-03-13 08:35:03
【问题描述】：

我有一个输入框，我希望文本消失。谷歌搜索后，我在这里找到了一个不错的解决方案： 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');
  }
});

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

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

【问题讨论】：

你不能在文本框中设置动画

标签： jquery

【解决方案1】：

您的脚本中有一些语法错误：

$(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 不支持颜色属性的动画。请参阅here 了解更多信息。

请参阅demo 了解包含 jQuery-UI 库的动画。

参考

.animate

【讨论】：

得到了动画，并纠正了错误，谢谢！演示中的文字似乎没有消失。
@AlexanderIvanov，在哪个演示中文本没有消失，预计什么时候会发生？
hups，没有看到测试消失，我的坏

【解决方案2】：

val() 获取文本框的 value，这就是它里面写的内容。这是一个字符串。您不能为字符串设置动画，您可以为 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>

【讨论】：

如果我使用 $("#textboxid")，整个框就会消失，而我希望文本消失。看看这里jsfiddle.net/7ksWA/1 那里的文字似乎消失了。
知道了。我已经更新了我的答案。只需使用 CSS3 过渡。