title: objects disappear while sliding over them while they fade in
body: <p>I have a problem with some jQuery fadeIn effect. This is actually on this website: <a href="http://tucado.com/index.html" rel="nofollow noreferrer">website here</a>. The problem appears when you select any option from the main menu and during page load up (menu is fading In) slide over the menu buttons. Then some of them (the one you were fading over) will not appear, or will appear slightly faded.
  I have used this code for buttons:</p>
  <p>HTML:</p>
  <pre><code>            &lt;nav&gt;
                  &lt;a id=&quot;b1&quot; href=&quot;index.html&quot;&gt;&lt;span&gt;01. &lt;strong&gt;ABOUT US&lt;/strong&gt;&lt;/span&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a id=&quot;b2&quot; href=&quot;webdesign.html&quot;&gt;&lt;span&gt;02. &lt;strong&gt;WEBSITE DESIGN&lt;/strong&gt;&lt;/span&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a id=&quot;b3&quot; href=&quot;mobile-websites.html&quot;&gt;&lt;span&gt;03. &lt;strong&gt;MOBILE WEBSITES&lt;/strong&gt;&lt;/span&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a id=&quot;b4&quot; href=&quot;captive-portals.html&quot;&gt;&lt;span&gt;04. &lt;strong&gt;CAPTIVE PORTALS&lt;/strong&gt;&lt;/span&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a id=&quot;b5&quot; href=&quot;portfolio.html&quot;&gt;&lt;span&gt;05. &lt;strong&gt;PORTFOLIO&lt;/strong&gt;&lt;/span&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;a id=&quot;b6&quot; href=&quot;contact-us.html&quot;&gt;&lt;span&gt;06. &lt;strong&gt;CONTACT US&lt;/strong&gt;&lt;/span&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;/nav&gt;
  </code></pre>
  <p>JQUERY:</p>
  <pre><code>$(document).ready(function(){
  $(&quot;nav a&quot;).mouseenter(function () {
      $('div', this).stop(true, false).animate({
          'height': '65px'
      }, 100);
      $(this).stop(true, false).animate({
          'padding-top': '5px'
      }, 300);
  }).mouseleave(function () {
      $('div', this).stop(true, false).animate({
          'height': '0px'
      }, 300);
      
      $(this).stop(true, false).animate({
          'padding-top': '25px'
      }, 500);
  });
  
      
  $('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
      
  for (var i=1; i&lt;99; i++) {
    (function(i){
      setTimeout(function() {
         $('#b'+i).fadeIn(500);
       }, 300+100*i);
    })(i);
  }
   });    
  </code></pre>
  <p>JS FIDDLE HERE:
  <a href="http://jsfiddle.net/tucado/9hhZW/" rel="nofollow noreferrer">http://jsfiddle.net/tucado/9hhZW/</a></p>
  <p>(slide mouse over buttons while fading in and you will know what I mean).
  Basically I want buttons to appear normally so the sliding mouse over them won't interrupt them in fading to 100%.</p>
  <p>Thank you in advance for any solution for this problem.</p>