[Resolvido] Diminuir width de outros elementos

Fala galera Beleza ?

Então sou meio novato em javascript mechi muito pouco mesmo , porem tenho alguma experiencia em programação e CSS

bom minha duvida é a seguinte

Estou criando um banner no estilo "SANFONA" para este site

Negocio Animal

eu consegui criar o banner , só que eu queria que quando eu colocasse o mouse em cima da imagem , alem dela aumentar eu dimuiria todas as outras , só que não consigo fazer de jeito nenhum :\

eu quero que ela diminua pois se eu passo o mouse do jeito que ta ela ultrapassa o limite da div que eu coloquei jogando assim as imagens posteriores pra baixo .-.

aqui tem o code

	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
 $('#sanfona li').hover(
 function () {
 var $this = $(this);

 $this.stop().animate({'width':'575px'},500);//a função stop antes da animação é essencial
 $('.titulo',$this).stop(true,true).fadeOut();
 $('.bgDestaque',$this).stop(true,true).slideDown(500);
 $('.comentario',$this).stop(true,true).fadeIn();
 }, <!-- fecha function 01-->

 function () {
 var $this = $(this);
 $this.stop().animate({'width':'170px'},1000);
 $('.titulo',$this).stop(true,true).fadeIn();
 $('.comentario',$this).stop(true,true).fadeOut(500);
 $('.bgDestaque',$this).stop(true,true).slideUp(700);
 } <!-- fecha function 02-->
 ); <!-- fecha sanfona li-->

}); <!--fecha function principal-->

</script> <!--end script -->

Alguem tem uma solução ?

Grato desde já (: