如何使我的输入框占位文本平滑过渡？

Question

我多次调用$("input").attr("placeholder,"Another String")函数。

我希望这些字符串能够平滑地过渡（类似于fadeIn/Out的效果）。我该怎么做？我不介意使用哪种工具来完成这个任务（CSS、纯JS或JQuery），只要能完成就行。

- Louis93

---

一个不太正规的解决方案仍然是一个解决方案。你能详细说明一下吗？ - Louis93

你能否尝试在占位符中添加过渡CSS属性？ - Chad

我试过了，但是没有成功 @Chad - Louis93

你可以设置一个 fiddle 吗？ - Chad

Answer 1

您可以尝试使用 CSS 过渡来针对占位符文本进行操作。添加一个改变不透明度为0的类，然后在给它时间过渡的同时更改占位符文本并移除该类。

::-webkit-input-placeholder { transition : opacity 0.5s; }
::-moz-placeholder { transition : opacity 0.5s; }
:-ms-input-placeholder { transition : opacity 0.5s; }
.fade::-webkit-input-placeholder { opacity : 0; }
.fade::-moz-placeholder { opacity : 0; }
.fade:-ms-input-placeholder { opacity : 0; }

JS:

    $("input").addClass("fade");
    setTimeout(function() {
        $("input").attr("placeholder", "New text here")
                  .removeClass("fade");
    }, 500);

示例：http://jsfiddle.net/F3z3V/

以上内容在Chrome中似乎完美地运作。在IE中，它有点工作：它将占位文本淡入淡出，但也淡化了输入边框 - 奇怪。在FF中没有发生淡入淡出效果 - 不确定为什么。

尽管它只部分工作，但我发布了它，因为至少它给了您一个起点。

- nnnnnn