Question

I’m currently working on a project and designing a top navigation bar using Twitter Bootstrap and jQuery. I have a search bar which the user can use do a search query. As you can see below, the “placeholder” has the value “Car”. I want jQuery to change the value of “placeholder”. jQuery should pick a random value (string) from an array, and while the text changes between x amount of seconds, there should be a smooth transition (fadein and fadeout).

<div class="span4">
    <form class="navbar-search input-append">
        <input id="appendedInputButton" type="text" class="input-xlarge" placeholder="Cars">
        <button class="btn" type="button"><i class="icon-search"></i></button>
    </form>
</div>

Answer 1

This will replace the placeholder every 1 second:

$(function() {

   var fonts = ['Times New Roman', 'Arial', 'Tahoma'];
   var time = setInterval(function() {
       var newFont = fonts[Math.floor(Math.random()*fonts.length)];
       $('#appendedInputButton').attr('placeholder', newFont);
   },1000);

});

jsFiddle here. In terms of the fading, you might not be able to recreate the functionality you want. jQuery provide wants of achieve fadeouts, either through fadeOut() or animate() but they only affect the DOM element itself and one of its CSS properties – not an attribute.