问题与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()