Animating Placeholder Text?

Question

Can anybody help me with adding my text animation into a form I have created?

The text currently animates when you refresh the page, this works fine although I need it working like a placeholder in the form.

Once a user clicks on the form the text needs to disappear enabling the user to be able to search normally.

Please see my Fiddle

If anybody could assist please update the fiddle, your help is much appreciated !

var txt = $('.writer').text();
var timeOut;
var txtLen = txt.length;
var char = 0;
$('.writer').text('|');
(function typeIt() {   
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function() {
        char++;
        var type = txt.substring(0, char);
        $('.writer').text(type + '|');
        typeIt();

        if (char == txtLen) {
            $('.writer').text($('.writer').text().slice(0, -1)); // remove the '|'
            clearTimeout(timeOut);
        }

    }, humanize);
}());

Answer 1

Here you go

Fiddle Demo

Basically, include the custom text in the 'var txt' rather than looking up the DOM to get the text.

Answer 2

I think you are looking for attr('placeholder') ?

$('.main-search').attr('placeholder');

see my update: http://jsfiddle.net/tdpK5/1/