How can I make a smooth transition of my input's placeholder text?

Question

I make several calls to $("input").attr("placeholder,"Another String")

I want the strings to transition smoothly (with a fadeIn/Out sort of effect) as this happens. How can I do this? I am not particularly pick about what tools I use to get this done (CSS, pure JS or JQuery) as long as it gets done.

Answer 1

You could try CSS transitions targeting the placeholder text. Add a class that changes the opacity to 0, then after giving it time to transition change the placeholder text and remove the class.

::-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);

Demo: http://jsfiddle.net/F3z3V/

The above seems to work perfectly in Chrome. In IE it sort of works: it fades the placeholder text in and out but fades the input border too - weird. No fade effect happened in FF - not sure why.

I've posted this even though it only partially works because at least it gives you a starting point.