Smooth Forms Values

Making input values disappear smoothly.

HTML

<form action="#">

    <div class="price-form">
        <span class="txt">Username or email</span>
        <span><input type="text" /></span>
    </div>

    <div class="price-form">
        <span class="txt">Password</span>
        <span><input type="password" /></span>
    </div>

</form>

Chad was here

CSS

div.price-form{
    display:block;
    padding:10px;
    font-family: arial, sans-serif;
    font-size:16px;
}
div.price-form span.txt{
    position:absolute;
    z-index:1;
    padding:11px;
}
div.price-form span input{
    position:relative;
    z-index:2;
    font-size:16px;
    padding:9px 8px 8px 10px;
    background: rgba( 255, 255, 255, .5);
    -webkit-transition: background-color .2s ease-in-out;
    -moz-transition: background-color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;    
    transition: background-color .2s ease-in-out;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: solid 1px #ccc;
}
div.price-form span input:focus{
    background: rgba( 255, 255, 255, .7);
}
div.price-form span input.filled{
    background: rgba( 255, 255, 255, 1);
}

JavaScript

$("div.price-form span input").keyup(function(){
    if($(this).val()) {
        $(this).addClass('filled');
    }else{
        $(this).removeClass('filled');
    }            
});