jQuery Simulatenous animation
<p>After loads of googling and still not being able to solve the problem, i have to trouble you guys again.
<a href="http://goo.gl/Ibcdp" rel="nofollow">http://goo.gl/Ibcdp</a>
If you look on the top right side, you will notice a search box. It has a nice little animation effect that runs on focus. The full script is here:
<a href="http://goo.gl/VFBuk" rel="nofollow">http://goo.gl/VFBuk</a></p>

<p>Now I want the 2 animation events(shrinking the other menu items(i am using two classes, a normal one, and an item_selected class rendered server side) and enlarging the width of the search container div(#the_search_field) to run perfectly simultaneous. If you look close, you will notice how there is a tiny gap created for a few seconds in between the last two items.</p>

<p>This is because there is a delay between animations..also, in firefox this brakes down even further and because of that delay, the sum of widths of menu items exceeds the total width of the container and overflows it, which causes everything to break for a split second.
Thanks for all your help!</p>
