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

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 中没有出现淡入淡出效果 - 不知道为什么。

尽管它只是部分有效，但我已经发布了它，因为它至少为您提供了一个起点。