I have an input box, where i would like a text to disappear. After googling around i found a nice solution over here: Fade out text value inside of text field using jQuery
我有一个输入框,我希望文本消失。谷歌搜索后我找到了一个很好的解决方案:使用jQuery淡出文本字段内的文本值
However, for some reason it does not work with my code over here:
但是,出于某种原因,它不适用于我的代码:
$(document).ready(function(){
var input = $("#textboxid").val()
input.animate({color:'white'},1000, function(){
$(this).val('').css('color','black');
}
});
Could you tell where i'm mistaken? thank you
你能告诉我哪里弄错了吗?谢谢
EDIT: The text should disappear after user typed something in.
编辑:文本应该在用户输入内容后消失。
2 个解决方案
#1
1
There are some syntax errors in your script:
脚本中存在一些语法错误:
$(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
});
Furthermore jQuery don't support the animation of the color-attribute. See here for more information.
此外,jQuery不支持color-attribute的动画。浏览此处获取更多信息。
See this demo for the animation with the included jQuery-UI Library.
有关包含jQuery-UI库的动画,请参阅此演示。
Reference
#2
1
val() gets the value of the textbox, that is what's written inside it. It's a string. You can't animate a string, you can animate a jQuery object.
val()获取文本框的值,即在其中写入的内容。这是一个字符串。您无法为字符串设置动画,您可以为jQuery对象设置动画。
Don't take $("#textboxid").val()
, just take $("#textboxid")
.
不要拿$(“#textboxid”)。val(),只取$(“#textboxid”)。
EDIT :
I made it simply using just CSS3. This does not require any library and is hardware accelerated.
我只是简单地使用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>
#1
1
There are some syntax errors in your script:
脚本中存在一些语法错误:
$(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
});
Furthermore jQuery don't support the animation of the color-attribute. See here for more information.
此外,jQuery不支持color-attribute的动画。浏览此处获取更多信息。
See this demo for the animation with the included jQuery-UI Library.
有关包含jQuery-UI库的动画,请参阅此演示。
Reference
#2
1
val() gets the value of the textbox, that is what's written inside it. It's a string. You can't animate a string, you can animate a jQuery object.
val()获取文本框的值,即在其中写入的内容。这是一个字符串。您无法为字符串设置动画,您可以为jQuery对象设置动画。
Don't take $("#textboxid").val()
, just take $("#textboxid")
.
不要拿$(“#textboxid”)。val(),只取$(“#textboxid”)。
EDIT :
I made it simply using just CSS3. This does not require any library and is hardware accelerated.
我只是简单地使用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>