Animated stretchable search text box using jQuery

Today we will see the Animated Textbox which on focus stretch and on de-focus shrink to a particular size.
Here we are using jquery, css. This will reduce the occupied area by tradional search box. As shown in following image.


Animate Search Text Box</pre>
body {
    margin: 0;
.search_bar {
    background-color: #2D2D2D;
    margin: 0;
    padding: 7px 0;
    width: 100%;
.tb {
    background: url("search_icon.png") no-repeat scroll left center transparent;
    border: 0 none;
    display: block;
    margin: 0;
    padding: 0 0 0 18px;
    position: static;
    width: 0; color:#efefef; font-size:11px;
.search_box {
    background-color: white;
    border-radius: 1px 6px 1px 6px;
    margin: 0 0 0 8px;
    padding: 3px;
    width: 17px;

<div class="search_bar">
<div class="search_box"><input class="tb" type="textbox" />
<script type="text/javascript">// <![CDATA[
$(".search_box").focusin(function() {

	$(".search_box .tb").animate({width:160},"fast");

}).focusout(function() {

	$(".search_box .tb").animate({width:0},"fast");
// ]]></script></div>

Hope this post will help you

Nikhil Ughade
(UI Designer)

Nikhil on Deviant Art
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.

Nikhil on Twitter


About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: