如何使輸入的占位符文本平滑過渡？

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中沒有發生褪色效果-不知道為什么。

我已經發布了此內容，盡管它僅部分起作用，因為至少它為您提供了一個起點。