jQuery动画队列存在问题

我很难找到解决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>

.sect{
浮动：左；
宽度：190px；
高度：400px；
光标：指针；
溢出：隐藏；
}
#s1{背景色：#006600；}
#s2{背景色：#993300；}
#s3{背景色：#3333CC；}
#s4{背景色：#FF6600；}
#s5{背景色：#FFCC00；}
.传奇{
高度：50px；
利润上限：330px；
背景色：#000000；
颜色：#fff；
填充：10px；
字体大小：粗体；
字体大小：14px；
溢出：隐藏；
}
.图例img{
垂直对齐：中间对齐；
右侧填充：5px；
}
.图例p{
显示：无；
字体大小：正常；
}
#s1{
边框左上半径：20px；
-左上角moz边界半径：20px；
边框左下半径：20px；
-moz边框半径左下角：20px；
}
#立法1{
边框左下半径：20px；
-moz边框半径左下角：20px；
}
#s5{
边框右上角半径：20px；
-moz边界半径右上角：20px；
边框右下半径：20px；
-moz边界半径右下角：20px；
}
#立法5{
边框右下半径：20px；
-moz边界半径右下角：20px；
}
$（函数（）{
变量个数；
$（（.sECT））.HOFF（函数）{//< p>尝试调用< <代码> $（this）.STOP（）>代码> >悬停处理程序
 ，而不是写自己的（当然有其学术价值），您考虑过这些吗？




jsfiddle您的代码：您已经试过寻找了吗？有很多jQuery gallery插件。@gnarf：在问题中添加了您的演示：）这正是我想要做的。非常感谢！！！我只是对我的尝试没有成功感到有点沮丧，但我会继续尝试找出问题所在，只是为了掌握jquery动画函数的一些问题。再次感谢！不客气。我想情况会是这样的-这是一个非常新的插件（从3/7开始），也很漂亮：）顺便说一句，当你评论某人的帖子时，不需要使用“@username”。