title: Making jQuery animate Div's to Grow in Size
body: <p>I am working on a page for my portfolio website that displays various services. There's a large box in the center column of three columns. On the left and right of the central box are columns of 3 boxes each. Each box is a clickable link that then changes the content in the central block.</p>
  
  <p>I'm trying to make the boxes on the sides of the central box grow in height on <code>mouseover</code> and shrink on mouseout using jQuery <code>.animate()</code>.</p>
  
  <p>My problem is that the boxes are very spastic. When you <code>mouseout</code> of one and go to another sometimes it will shrink and then grow and then shrink again. How can I force them to stop growing and shrinking a 2nd time?</p>
  
  <p>Here's the link to the page in question: <a href="http://www.nukamedia.com/beta/services.html" rel="nofollow">http://www.nukamedia.com/beta/services.html</a></p>
  
  <p><strong>Here's the jQuery code:</strong>   </p>
  
  <pre><code>    var classes = ".how-it-works, .built-for-power, .done-on-time, .inform-your-customers, .spread-the-word, .keep-in-contact";
      $(classes).on("mouseover", function() {
              $(this).animate({height: '+=20px'},500);
      });
      $(classes).on("mouseout", function() {
              $(this).animate({height: '-=20px'},500);
      });
  </code></pre>
  
  <p><strong>Here's the HTML Markup:</strong></p>
  
  <pre><code>&lt;div class="services-content container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="left-control-squares twocol"&gt;
              &lt;div class="how-it-works box-defaults"&gt;
                  &lt;a href="" id="works"&gt;&lt;/a&gt;
                  Learn&lt;br/&gt;
                  How It&lt;br/&gt;
                  &lt;span&gt;Works&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="built-for-power box-defaults box-text-align"&gt;
                  &lt;a href="javascript: changeContent('power');" id="power"&gt;&lt;/a&gt;
                  Built For&lt;br/&gt;
                  &lt;span&gt;Power&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="done-on-time box-defaults box-text-align"&gt;
                  &lt;a href="javascript: changeContent('time');" id="time"&gt;&lt;/a&gt;
                  Done On&lt;br/&gt;
                  &lt;span&gt;Time&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="eightcol" id="content-square"&gt;
              &lt;img src="images/click-to-learn.png" /&gt;
          &lt;/div&gt;
  
          &lt;div class="right-control-squares  twocol last"&gt;
              &lt;div class="inform-your-customers box-defaults"&gt;
                  &lt;a href="javascript: changeContent('customers');" id="customers"&gt;&lt;/a&gt;
                  Inform&lt;br/&gt;
                  Your&lt;br/&gt;
                  &lt;span&gt;Customers&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="spread-the-word box-defaults box-text-align"&gt;
                  &lt;a href="javascript: changeContent('word');" id="word"&gt;&lt;/a&gt;
                  Spread The&lt;br/&gt;
                  &lt;span&gt;Word&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="keep-in-contact box-defaults box-text-align"&gt;
                  &lt;a href="javascript: changeContent('contact');" id="contact"&gt;&lt;/a&gt;
                  Keep In&lt;br/&gt;
                  &lt;span&gt;Contact&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;      
  </code></pre>