Проблема с очередью анимации jQuery

Question

Я с трудом пытаюсь выяснить, как решить некоторые проблемы с очередью анимации jQuery ... Я пытаюсь создать гармошку, похожую на галерею, которая расширяет элемент div и одновременно увеличивает его высота области меток этого же div, в то время как немного сокращает все остальные div галереи. Я перепробовал все, что мог найти в сети, .stop (), .stop (true, true) и плагин с именем hoverFlow. Пожалуйста, кто-нибудь может помочь мне решить эту проблему?

Вот весь код, который у меня есть:

  .sect{
      float: left;
      width: 190px;
      height: 400px;
      cursor: pointer;
      overflow: hidden;
  }

  #s1{ background-color: #006600; }
  #s2{ background-color: #993300; }
  #s3{ background-color: #3333CC; }
  #s4{ background-color: #FF6600; }
  #s5{ background-color: #FFCC00; }

  .legend{
      height: 50px;
      margin-top: 330px;
      background-color: #000000;
      color: #fff;
      padding: 10px;
      font-weight: bold;
      font-size: 14px;
      overflow: hidden;
  }

  .legend img{
      vertical-align: middle;
      padding-right: 5px;
  }

  .legend p{
      display: none;
      font-weight: normal;
  }

  #s1{
      border-top-left-radius: 20px;
      -moz-border-radius-topleft: 20px;
      border-bottom-left-radius: 20px;
      -moz-border-radius-bottomleft: 20px;
  }

  #leg1{
      border-bottom-left-radius: 20px;
      -moz-border-radius-bottomleft: 20px;
  }

  #s5{
      border-top-right-radius: 20px;
      -moz-border-radius-topright: 20px;
      border-bottom-right-radius: 20px;
      -moz-border-radius-bottomright: 20px;
  }

  #leg5{
      border-bottom-right-radius: 20px;
      -moz-border-radius-bottomright: 20px;
  }


  $(function(){

      var sectNumber;

      $('.sect').hover(function(){ // <--------- MOUSE OVER

          // Recover selected section's id
          sectNumber = $(this).attr('id');

          // Resize all the sections that were not selected (shrink)
          $('div.sect').each(function(){
              if($(this).attr("id") != sectNumber){
                  $(this).stop().animate( {width: 50}, 500);
                  $(this).find('div.legend').fadeOut(200);
              }
          });

          // Increase width of selected section
          $(this).stop().animate( {width: "750"}, 500);
          // Incerase height of selected section's legend
          $(this).find('div.legend').stop().animate( {height: 100, marginTop: 280}, 500);
          // Show legend description
          $(this).find('div.legend').find('p').fadeIn(500);

      }, function(){ // <--------- MOUSE OUT

          // Resize all the sections that were not selected (expand)
          $('div.sect').each(function(){
              if($(this).attr("id") != sectNumber){
                  $(this).stop().animate( {width: 190}, 500);
                  $(this).find('div.legend').fadeIn(700);
              }
          });

          // Reduce width of selected section
          $(this).stop().animate( {width: 190}, 500);
          // Reduce height of selected section's legend
          $(this).find('div.legend').stop().animate( {height: 50, marginTop: 330}, 500);
          // Hide legend description
          $(this).find('div.legend').find('p').fadeOut(500);
      });

  });


<div id="accordion">
    <div id="s1" class="sect">
        <div class="legend" id="leg1">
            Section 1 Header
            <p>
                Description Line 1<br/>
                Description Line 2
            </p>
        </div>
    </div>
    <div id="s2" class="sect">
        <div class="legend" id="leg2">
            Section 2 Header
            <p>
                Description Line 1
            </p>
        </div>
    </div>
    <div id="s3" class="sect">
        <div class="legend" id="leg3">
            Section 3 Header
            <p>
                Description Line 1
            </p>
        </div>
    </div>
    <div id="s4" class="sect">
        <div class="legend" id="leg4">
            Section 4 Header
            <p>
                Description Line 1
            </p>
        </div>
    </div>
    <div id="s5" class="sect">
        <div class="legend" id="leg5">
           Section 5 Header
            <p>
                Description Line 1
            </p>
        </div>
    </div>
</div>

jsfiddle demo (спасибо @ gnarf )

Answer 1

Вместо того, чтобы писать свой собственный (что, безусловно, имеет свои академические достоинства), вы рассмотрели какой-либо из них?

• http://web -argument.com / 2011/03/07 / jquery-accordion-image-menu-plugin / # examples
• http://flcomponents.net/Components/Item/JQuery_UI_Accordion
• http://bin.rydygel.de/aga/

Answer 2

Попробуйте вызвать $(this).stop() в начале обработчика наведения