proszę o wyrozumiałość - w jquery jestem zielony ale się uczę

mam nadzieję, że za dużo kodu nie wkleję. Teraz działa na najazd myszką. Po zjechaniu chciałbym aby wracało do pierwotnej postaci.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #wrapper { widht: 800px; height: 500px; border: 1px solid red; } #wrapper #box { width: 100px; height: 400px; background: #b02329; float: left; } #wrapper #box1 { width: 100px; height: 400px; background: green; float: left; } </style> <script type="text/javascript"> $(function() { $('#box').mouseover(function() { $(this).animate({ "width" : "400px" }); }); }); Witam, proszę o wyrozumiałość - w jquery jestem zielony ale się uczę :) mam nadzieję, że za dużo kodu nie wkleję. Teraz działa na najazd myszką. Po zjechaniu chciałbym aby wracało do pierwotnej postaci. Zrobione dla jednego boxa - ale czy nie można by tego lepiej zapisać? [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #wrapper { widht: 800px; height: 500px; border: 1px solid red; } #wrapper #box { width: 100px; height: 400px; background: #b02329; float: left; } #wrapper #box1 { width: 100px; height: 400px; background: green; float: left; } </style> <script type="text/javascript"> $(function() { $('#box').mouseout(function() { $(this).animate({ "width" : "100px" }); }); }); $(function() { $('#box1').mouseover(function() { $(this).animate({ "width" : "400px" }); }); }); </script> </head> <body> <div id="wrapper"> </div> </body> </html>