淡入和/或淡出占位符文本

Question

有没有办法淡入和淡出输入的占位符文本？

我试过了：

$('.userBox::-webkit-input-placeholder').animate({color: '#888888'}, 500);

但这只是崩溃......

Answer 1

如果你想淡出焦点，然后淡入模糊（当输入框为空时 ），以下内容应该适用于webkit：

<强> HTML：

<input id="user_email" name="user[email]" placeholder="user@example.org" type="email" />

<强> CSS：

input[type="email"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="email"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}

jsFiddle：http://jsfiddle.net/a9UA3/

Answer 2

如果你指的是浏览器实现提供的占位符文本，我不相信。如果您想使用focus，blur＆amp;来实现自定义占位符key*事件然后是可能的。

Answer 3

尝试使用

$('.userBox::-webkit-input-placeholder').fadeOut(500);

或者，您也可以使用this插件。