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没有褪色效果 - 不确定原因。

我发布了这个，尽管它只是部分有效，因为至少它给你一个起点。

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

1 个答案: