title: Jquery hover event + css.animate
body: <p>I have created a simple tool-tip that fadesIn when you hover over the ( i ) icon. The icon comes up when hovering over a album cover. There at the moment is a strange bug I think that it is due to .more-info opacity css animate jQuery method. I was wondering how to fix this or how to change the code that it would work.</p>
  
  <p>bug: When hovering over the ( i ) icon so that the tool-tip comes up and then leaving it or the ( i ) icon the tool-tip fadesOut but if you hover back on the album cover before it is completely fadenOut it flashes a little bit. The tool-tip should only come up when hovering over the ( i ) icon or hovering over the tool-tip it self.</p>
  
  <p>VIDEO of the bug: <a href="http://www.screenr.com/tIJ8" rel="nofollow">http://www.screenr.com/tIJ8</a></p>
  
  <p>The site whit the problem: <a href="http://www.midnightlisteners.com/" rel="nofollow">http://www.midnightlisteners.com/</a></p>
  
  <p>The tool-tip css file: <a href="http://www.midnightlisteners.com/wp-content/themes/midnightlisteners-v2.0wp/css/the-tooltip.css" rel="nofollow">http://www.midnightlisteners.com/wp-content/themes/midnightlisteners-v2.0wp/css/the-tooltip.css</a></p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="more-info"&gt;
      &lt;div class="the-tooltip top center black"&gt;
          &lt;span class="too-tip-text"&gt;
          &lt;h3&gt;Similar than: &lt;span&gt;&lt;?php the_title(); ?&gt; &amp;rsaquo; &lt;/span&gt;&lt;/h3&gt;
          &lt;div class="related"&gt;
             &lt;ul&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>jQuery code:</p>
  
  <pre><code> $(".play").mouseenter(function() {
          $(this).next('.more-info').stop(true, false).animate({
              opacity: '1'
          }, 800, 'linear');
          $(".more-info").mouseenter(function() {
              $(this).stop(true).animate({
                  opacity: '1'
              }, 800, 'linear');
          });
      });
      $(".play").mouseleave(function() {
          $(this).next('.more-info').stop(true, false).animate({
              opacity: '0'
          }, 1000, 'linear');
          $(".more-info").mouseleave(function() {
              $(this).stop(true).animate({
                  opacity: '0'
              }, 1000, 'linear');
          });
      });
  
  
      $(".more-info").mouseenter(function() {
          clearTimeout($(this).data('timeoutId'));
          $(this).find(".the-tooltip").fadeIn('150', 'linear');
      }).mouseleave(function() {
          var someElement = $(this);
          var timeoutId = setTimeout(function() {
              someElement.find(".the-tooltip").fadeOut('150', 'linear');
          }, 1200);
          //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
          someElement.data('timeoutId', timeoutId);
      });
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>.more-info{
      position: absolute;
      top: 75px;
      left: 85px;
      z-index: 9999;
      display: block;
      width: 19px;
      height: 18px;
      background: transparent url(images/midnightlisteners-bgs-matrix.png) no-repeat -60px -44px;
      cursor: pointer;
      opacity: 0;
      display: block;
  }
  
  .more-info:hover{
  
  }​
  </code></pre>
  
  <p>EDIT: How to make the code simpler and not repeating it self. how to implement var elements</p>
  
  <pre><code>$(".play").mouseenter(function(){
          $(this).next('.more-info').stop(true, false).animate({
              opacity: '1'
              }, 800, 'linear');
          $(".more-info").mouseenter(function(){
              $(this).stop(true).animate({
                  opacity: '1'
                  }, 800, 'linear');
          });
          $(".the-tooltip-wrap").mouseenter(function(){
              $(this).prev(".more-info").stop(true).animate({
                  opacity: '1'
                  }, 800, 'linear');
          });
      });
      $(".play").mouseleave(function(){
          $(this).next('.more-info').stop(true, false).animate({
              opacity: '0'
              }, 1000, 'linear');
          $(".more-info").mouseleave(function(){
              $(this).stop(true).animate({
                  opacity: '0'
                  }, 1000, 'linear');
          });
          $(".the-tooltip-wrap").mouseleave(function(){
              $(this).prev(".more-info").stop(true).animate({
                  opacity: '0'
                  }, 1000, 'linear');
          }); 
      }); 
  </code></pre>
  
  <p>​</p>