title: menu fade in effect on mouseover
body: <pre><code>&lt;ul style="#" class="hmenu"&gt;
      &lt;li class="active selected"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have a menu with one link as <code>active</code>. I use this script to switch active class on hover</p>
  
  <pre><code>$('.hmenu li').on('mouseenter', function () {
      $('.hmenu li').removeClass('active');
      $(this).addClass('active');
  });
  $('.hmenu li').on('mouseleave', function () {
      $(this).removeClass('active');
      $('.hmenu li[class=selected]').addClass('active');
  });
  </code></pre>
  
  <p>This work's but i want to change it so that when i hover any link, the link should fadeIn and fadeOut on mouseleave.</p>
  
  <p>I can't get my head around this - How can i do this ?</p>
  
  <p>Here is the fiddle : <a href="http://jsfiddle.net/GdSUg/" rel="nofollow">http://jsfiddle.net/GdSUg/</a></p>