Question

Below is my code which I used, I would like to shrink the tabs in navigation bar when I hover on tabs like news ,photos etc.. For best example visit apple.com ,when you click on searchbar other tabs will shrink. How to implement the same? While hovering on the tab the other tabs should shrink.

http://jsfiddle.net/ATPRu/

HTML:

<div id="wrapper">
    <nav id="mainnav">
        <ol>
            <li class="home"><a href="http://www.domain.com"></a></li>
            <li class="news"><a href="http://www.domain.com/p/">News</a></li>
            <li class="photos"><a href="http://www.domain.com/channels/s/">Photos</a> </li>
            <li class="biography"><a href="http://www.domain.com/e/">Biography</a></li>
        </ol>
    </nav>
</div>

CSS:

div#wrapper{
width:990px;
height:auto;
margin:0 auto;

font:15px Arial,Verdana,Helvetica,sans-serif;

}
div#wrapper #mainnav{
width:100%;
height:40px;

border-bottom:1px solid #c4c4c4;
float:left;
clear:both;
background-color: #5b5b5b;
background-image: -moz-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f); 
background-image: -webkit-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f); 
background-image: -o-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
background-image: -ms-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
background-image: linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
}

div#wrapper #mainnav ol{
list-style:none;
margin:0px; padding:0;
}
div#wrapper #mainnav li{
float:left;
}

div#wrapper #mainnav li.home{
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 40%, #3690f0 56%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2),  color-stop(40%,#54a3ee), color-stop(56%,#3690f0), color-stop(100%,#1e69de)); /*  Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%);    /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

float:left;
width:48px;
height:40px;
position:relative;
margin-top:0px ; padding:0;
}
div#wrapper #mainnav li.home a{
background:url(home.png) 0px 0px no-repeat; 
margin-left:0px;
}


div#wrapper #mainnav li.home:hover{
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 40%, #3690f0 56%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(40%,#54a3ee), color-stop(56%,#3690f0), color-stop(100%,#1e69de)); /*  Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
float:left;
width:48px;
height:40px;
position:relative;
margin-top:0px ; padding:0;
}
div#wrapper #mainnav li.home a:hover{
background:url(home.png) 0px 0px no-repeat; 
margin-left:0px;

}

div#wrapper #mainnav li.news:hover{
cursor:pointer;
border:1px solid #b30808; background-color: #e40a0a;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e40a0a), color-stop(100%, #9f0202));
 background-image: -webkit-linear-gradient(top, #e40a0a, #9f0202);
background-image: -moz-linear-gradient(top, #e40a0a, #9f0202);
background-image: -ms-linear-gradient(top, #e40a0a, #9f0202);
background-image: -o-linear-gradient(top, #e40a0a, #9f0202);
background-image: linear-gradient(top, #e40a0a, #9f0202);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e40a0a, endColorstr=#9f0202); 
 }
 div#wrapper #mainnav li.news a:hover{
background:url(awatch_icon.png) 5px 6px no-repeat; 
padding-top:9px;
text-shadow:1px 1px 1px blue;border-left:1px solid #000;
}

div#wrapper #mainnav li.photos:hover{
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 40%, #3690f0 56%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color- stop(40%,#54a3ee), color-stop(56%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+  */
background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 40%,#3690f0 56%,#1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
}
div#wrapper #mainnav li.photos a:hover{
background:url(domain_icon.png) 5px 6px no-repeat;padding-top:10px;text-shadow:1px 1px 1px blue;}




div#wrapper #mainnav li.biography:hover{
background-color: #ffaf46;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf46), color-stop(100%, #e78404));
background-image: -webkit-linear-gradient(top, #ffaf46, #e78404);
background-image: -moz-linear-gradient(top, #ffaf46, #e78404);
background-image: -ms-linear-gradient(top, #ffaf46, #e78404);
background-image: -o-linear-gradient(top, #ffaf46, #e78404);
background-image: linear-gradient(top, #ffaf46, #e78404);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffaf46, endColorstr=#e78404);
}
div#wrapper #mainnav li.biography a:hover{
 background:url(icon.png) 5px 6px no-repeat;padding-top:10px;text-shadow:1px 1px 1px blue;}



div#wrapper #mainnav li{background:url(mainnav_sep.jpg) no-repeat left top;float:left;}
div#wrapper #mainnav li a{display:block;padding-top:11px;color:#fff;margin:0  10px;cursor:pointer;height:27px;text-shadow:1px 1px 1px #000;}
div#wrapper #mainnav li a:link, div#wrapper #mainnav li a:visited{text-decoration:none;}
div#wrapper #mainnav li a:hover,div#wrapper #mainnav li a:active, div#wrapper #mainnav li a:focus {
width:120px;height:29px;margin:0px 0px 0px 0px ;text-indent:35px;text- decoration:none;color:#fff;text-shadow:1px 1px 1px #000;}

Answer 1

If you want to do it like apple, I mean the slow motion, you can do it using CSS3 instead of jQuery

Use CSS3 transition properties

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */

Or if you need it somewhat like the apple.com you can check this out or this too

Demo