Stretch Search

Hello, I wanted to ask how to do a sliding search like here:

Answer 1, authority 100%


no heavy UI

Answer 2, authority 100%

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


Here is a working example. Layout:

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


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


        $(this).animate({width: 500}, "slow");
        $(this).animate({width: 250}, "slow");

Answer 3, authority 60%

Same, only CSS3 method

 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;