html如何淡化输入文本字段

Question

我使用jQuery api淡化输入，如下所示：

$(#input).fadeTo("slow", 0.5);

并在html中输入

<input type="text" name="input" id="input">

有效。但是，如果页面加载或刚刚打开，如何淡化此输入？

Answer 1

只需在DOM Ready中执行

$(document).ready(function(){
    $('#input').fadeTo("slow", 0.5);
});

DEMO

Answer 2

纯css Demo这样，即使用户停用了Javascript，它也能正常工作，您无需将输入设置为display:none

标记

<input type="text" name="input" id="input">

风格

#input{
    animation:fadeIn 3s ease;
}

@keyframes fadeIn {
  from{opacity:0}
  to{opacity:.5}
}

Answer 3

Try this fiddle

$(document).ready(function(){
   $('#input').hide();
   $('#input').fadeIn(5000);
)};