title: JQuery - Obviate the Need for Replacement Element for Hover Function on Nav. Bar
body: <p>I'd like to understand if the problem in the code snippet below regards attempting to execute a fadeOut on a none-existent navigation bar element, and if so, how to retain this bar using a comparable code structure.  As shown below, the element fades out as expected using fadeOut, but does not fade in using fadeIn.  When observing the HTML in firebug, the fadeOut event concludes with "Display: none".</p>
  
  <pre><code>$(window).scroll(function() {
  if ($(".navbar").offset().top &gt; 50) {
      $(".navbar-fixed-top").addClass("top-nav-collapse");
      $(".page-scroll a#textAnimated.navbar-brand.page-scroll     
      span.brand").stop().animate({'font-size': '20px'}, 'fast');
      //$(".page-scroll").stop().fadeIn(50);
      $("a.page-scroll").stop().animate({'font-size': '16px'}, 'fast');
  
  
  
  } else {
      $(".navbar-fixed-top").removeClass("top-nav-collapse");
      $(".page-scroll a#textAnimated.navbar-brand.page-scroll 
      span.brand").stop().animate({'font-size': '26px'}, 'slow');
      $("a.page-scroll").stop().animate({'font-size': '18px'},   
      'fast');                   
  
   }});
  </code></pre>
  
  <p>Problem appears to lie herein:</p>
  
  <pre><code>**$(document).ready(function(){
  $("nav.navbar.navbar-default.navbar-fixed-top").hover(
  
      function(){
          $(this).stop(true, true).fadeIn('400');}, 
      function(){
          $(this).stop(true, true).fadeOut('100');}
  );
  });**
  
  
  
  //jQuery for page scrolling feature - requires jQuery Easing plugin
  $(function() {
  $('a.page-scroll').bind('click', function(event) {
      var $anchor = $(this);
      $('html, body').stop().animate({
          scrollTop: $($anchor.attr('href')).offset().top
      }, 1500, 'easeInOutExpo');
      event.preventDefault();
  });
  }); 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
  width: 100%;
  height: 100%;
  }
  
  html {
  width: 100%;
  height: 100%;
  }
  
  @media(min-width:767px) {
  .navbar {
      padding: 20px 0;
      -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
      -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
      transition: background .5s ease-in-out,padding .5s ease-in-out;
  }
  
  .navbar.navbar-default.navbar-fixed-top {
      display:inherit;
  }
  
  
  
  
  
  .top-nav-collapse {
      padding: 0;
  }
  }
  
  .intro-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #fff;
  }
  
  .resume-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
  }
  
  .aboutme-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #fff;
  }
  
  .contact-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
  }
  
  html {
        background-image: url("images/polygBg.png");
        background-size: 100%;
        background-attachment: fixed;
      }
      body  {
        width: 80%;
        height: 100%;
        opacity: .985;
        box-shadow: 0 0 10px rgba(51, 51, 51, .7);
        margin: auto;
        margin-top: 0px;        
        font-family: 'Josefin Slab', serif;
        overflow-y:scroll;
      }
      body a {
        font-family: 'Josefin Slab', serif;
        font-weight: 300;
      }
      .container {
        width: 85%;
        height: 100%;
        margin: auto;
        margin-top: 0px;        
        font-family: 'Josefin Slab', serif;
      }
      .page-scroll{
        font-size: 18px;
      }
      .top{
        font-size: 20px;
        font-weight: 600;
      }
      .navbar-default{
        background: #000 none scroll 0% 0%;
        box-shadow: 0 1px .6em rgba(0, 0, 0, 0.7);
        border: thin dotted #000000;
        border-bottom-left-radius: 30px 40px;
        border-bottom-right-radius: 30px 40px;
        margin-left:auto;
        margin-right:auto;
        width:95%
  
      }
      .intro-section {
        background: #508148;  
        min-width: 500px;       
      }
      .menItmArro {
        font-size: 14px;
      }
      .brand {
        font-family: 'Rochester', cursive;
        font-size: 26px;
       }
       p {           
         min-width: 200px;
         right: 30px;
         font-color: FFE;
         }
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/adrriver/512n7vqx/5/" rel="nofollow">https://jsfiddle.net/adrriver/512n7vqx/5/</a></p>