Fade out text value inside of text field using jQuery

Question

I am not entirely sure if this is possible or not, I am pretty knowledgeable when it comes to jQuery and JavaScript in general, but this one has me stumped. I\'ve created a

Answer 1

here's what I use for exactly this. first add this to your JavaScript includes: http://plugins.jquery.com/project/color

then do this:

$('.search-input').focus(function(){
    if($(this).val() == 'Default Text'){
        $(this).animate({
            color: '#fff'
            //your input background color.
        }, 500, 'linear', function(){
            $(this).val('').css('color','#000'); 
            //this is done so that when you start typing, you see the text again :P
        });
    }
}).blur(function(){
    if($(this).val() == ''){
        $(this).val('Default Text').css('color','#fff');
        $(this).animate({
            color: '#000'
        }, 500, 'linear');
    }
});

what this will do is fade the text to the background color and then empty the input field. and on blur show the default text first, then fade it back to it's original color.

an illusion :)

you can remove a lot of this if you don't wish to actually clear the field. but you get the idea. the key here are two things. use the color plugin and .animate() effect.