I’m having a hard time trying to figure out how to solve some jQuery

Question

0

Asked: May 20, 20262026-05-20T13:31:33+00:00 2026-05-20T13:31:33+00:00

I’m having a hard time trying to figure out how to solve some jQuery

0

I’m having a hard time trying to figure out how to solve some jQuery animation queue issues… I’m trying to make an accordion like gallery, that expands the div that is hovered and at the same time, increase the height of a label area of this same div, while shrinks a little all the other gallery divs. I’ve tryed all I could find on the net, .stop(), .stop(true, true) and a plugin called hoverFlow. Please, can anyone help me solve this?

Here all the code I’ve got so far:

  .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 (thanks to @gnarf)