title: jquery mouse hover effect bug, mouseover event always triggers a few times on mouseout
body: <p>I have a simple gallery grid with a nested span that shows the title, which I want to slide up on mouse over, and hide on mouse out.</p>
  
  <p>Everything works fine, except whenever the mouse moves down to where the title is and/or hovers out of the tile from the bottom of the tile, then the hover effect repeats a few times uncontrollably. </p>
  
  <p>At first I thought it might be because the span is contained within the anchor which is the hover trigger, but moving it out didn't work either.</p>
  
  <p>Any ideas ?</p>
  
  <p>The demo is here : <a href="http://www.winterealm.com/gallery/" rel="noreferrer">http://www.winterealm.com/gallery/</a></p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="gallery_container"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/artistisch.jpg" alt="aaa"/&gt;&lt;span class="title"&gt;Category A&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/attraktiv.jpg" alt="bbb"/&gt;&lt;span class="title"&gt;Category B&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/historisch.jpg" alt="ccc"/&gt;&lt;span class="title"&gt;Category C&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/popart.jpg" alt="ddd"/&gt;&lt;span class="title"&gt;Category D&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/portrait.jpg" alt="eee"/&gt;&lt;span class="title"&gt;Category E&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;&lt;img src="assets/img/sketch.jpg" alt="fff"/&gt;&lt;span class="title"&gt;Category F&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the jquery</p>
  
  <pre><code>$(document).ready(function(){
      $('.gallery_container a').mouseover(function(){
          $(this).children('.title').animate({
              opacity: 100,
              bottom: 0
          },200);
      });
  
      $('.gallery_container a').mouseout(function(){
          $(this).children('.title').animate({
              opacity: 0,
              bottom: -30
          },200);
      });
  });
  </code></pre>