Mam taki kod który po najechaniu na li zwiększa szerokość a później powraca do poprzedniego rozmiaru.

Jak dodać do tego aby po na jechaniu na ten li reszta będzie się zmniejszać wraz z tym jak on się zwiększa, a jak się zjedzie z niego myszko to aby tamte też powróciły do swojego poprzedniego rozmiaru


Kod JS:

[HTML] pobierz, plaintext 
$(function() {
        $('#accordion > li').hover(
            function () {
                var $this = $(this);
                $this.stop().animate({'width':'370px'},500);
                $('.heading',$this).stop(true,true).fadeOut();
                $('.bgDescription',$this).stop(true,true).slideDown(500);
                $('.description',$this).stop(true,true).fadeIn();
            },
            function () {
                var $this = $(this);
                $this.stop().animate({'width':'190px'},1000);
                $('.heading',$this).stop(true,true).fadeIn();
                $('.description',$this).stop(true,true).fadeOut(500);
                $('.bgDescription',$this).stop(true,true).slideUp(700);
            }
        );
    });
[HTML] pobierz, plaintext 

Kod HTML

[HTML] pobierz, plaintext 
<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg2">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg3">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg4">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg5">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>
[HTML] pobierz, plaintext 

Prawie mi się udało

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
      function () {
		$('#accordion > li:not(hover)').animate({'width':'170px'},500);
        var $this = $(this);
        $this.stop().animate({'width':'270px'},500);
        $('.heading',$this).stop(true,true).fadeOut();
        $('.bgDescription',$this).stop(true,true).slideDown(500);
        $('.description',$this).stop(true,true).fadeIn();
      },
      function () {
        var $this = $(this);
        $this.stop().animate({'width':'190px'},500);
		$('#accordion > li:not(hover)').animate({'width':'190px'},500);
        $('.heading',$this).stop(true,true).fadeIn();
        $('.description',$this).stop(true,true).fadeOut(500);
        $('.bgDescription',$this).stop(true,true).slideUp(700);
      }
    );
  });
</script>
[HTML] pobierz, plaintext 

tylko ze jakos dziwnie to dziala