CODEWITHSUNDEEP
jqueryhtmlformsanimationplaceholder
user2965875
user2965875

Reputation: 701

Animating Placeholder Text?

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);
}());

Upvotes: 1

Views: 3599

Answers (2)

Ajey
Ajey

Reputation: 8212

Here you go

Fiddle Demo

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

Upvotes: 4

Mike Bovenlander
Mike Bovenlander

Reputation: 5436

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

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

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

Upvotes: 2

Related Questions