Stretch Search

Hello, I wanted to ask how to do a sliding search like here: http://vremenno.net/misc/


Answer 1, authority 100%

$("input#search").animate({"width":"80%"},200);//200  
$("#divWithOtherButtons").hide(200);

no heavy UI


Answer 2, authority 100%

Include jquery-ui and by clicking on the element increase its width, right-align the element itself.

Added.

Here is a working example. Layout:

<input type="text" name="name" value="" id="search"/>

CSS:

#search{border: 1px solid #888888; width: 250px; float: right;}

Script:

$(document).ready(function(){
    $("#search").focusin(function(){
        $(this).animate({width: 500}, "slow");
    });
    $("#search").focusout(function(){
        $(this).animate({width: 250}, "slow");
    });
});

Answer 3, authority 60%

Same, only CSS3 method

#search{
 width: 250px;
 -moz-transition: width .2s ease-in-out;
 -o-transition: width .2s ease-in-out;
 -webkit-transition: width .2s ease-in-out;
 transition: width .2s ease-in-out;
}
#search:focus {
 width: 500px;
}