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

尝试在悬停处理程序的开头调用$(this).stop()

Answer 2

您是否考虑过这些问题，而不是自己编写（当然有其学术优点）？

jQuery动画队列的问题

2 个答案: