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

Question

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

我希望在发生这种情况时，字符串能够平稳过渡（具有fadeIn/Out效果）。 我怎样才能做到这一点？ 只要完成，我就不特别选择使用什么工具来完成此工作（CSS，纯JS或JQuery）。

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中没有发生褪色效果-不知道为什么。

我已经发布了此内容，尽管它仅部分起作用，因为至少它为您提供了一个起点。