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.

animated-search-box



Animate Search Text Box</pre>
<style><!--
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;
	cursor:pointer;
    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;
}
--></style>
<pre>

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

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

}).focusout(function() {

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

Hope this post will help you

Thanks,
Nikhil Ughade
(UI Designer)
Pune,IN

Nikhil on Deviant Art
http://designikx.deviantart.com
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
https://twitter.com/0nikhil

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: