jquery input auto-resize

I have some jquery that smoothly resizes a text input on click. It all works well except a small issue when you click away from the field, the field resets.

The annoying part is when you type into the field, then click away from the field, all data you input is removed.

How do I get it to NOT clear the text that was input when the user clicks away开发者_JS百科?

Heres a jsfiddle

and

Here is the jquery:

    var inputWdith = '250px';
    var inputWdithReturn = '140px';     
    $(document).ready(function() {
        $('input').focus(function(){

            $(this).val(function() {
                $(this).val(''); 
            });

            $(this).animate({
                width: inputWdith
            }, 400 )
        }); 

        $('input').blur(function(){
            $(this).val('Enter info...');
            $(this).animate({
                width: inputWdithReturn
            }, 500 )
        });
    });

Working js fiddle: http://jsfiddle.net/NcwZA/1/

$('input').focus(function(){
    if($(this).val()=='Enter info...'){
        $(this).val('');
    }

    //animate the box
    $(this).animate({
        width: inputWdith
    }, 400 )
}); 

$('input').blur(function(){
    if($(this).val()==''){
        $(this).val('Enter info...');
    }

    $(this).animate({
        width: inputWdithReturn
    }, 500 )

});

You'll only need to do the blur stuff if the field is blank.

$('input').blur(function(){
    if ($(this).is(":empty")){
        $(this).val("Enter info...")
            .animate({
                width: inputWdithReturn
            }, 500 );
    }
});

The problem is in the blur event. There is no condition to not replace the content the user has entered.