title: FadeOut and fadeIn not working
body: <p>I'm new in the world of jQuery and have been fiddling around with my code to make it work, and so far no succes. The jQuery is not working and in the beginning I thought it was not directed  accordingly to the index.html file. So changed the file directory and changed the jQuery code many times. Still not working. 
  The Css and HTML are working fine. </p>
  
  <p>Html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;Epic Forever :: Home Page&lt;/title&gt;
          &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;section id="epic_home"&gt;
              &lt;div id="eagleOne"&gt;&lt;/div&gt;
              &lt;div id="eagleTwo"&gt;&lt;/div&gt;
          &lt;/section&gt;
  
          &lt;script src="assets/homepage.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#eagleOne, #eagleTwo {
      background: url('../images/homepage-eagle.png');
      background-size: 100% 100%;
      display: block;
      height: 60%;
      left: 32%;
      margin-left: auto;
      margin-right: auto;
      position: fixed;
      top: 20%;
      width: 36%;}
  
  #eagleOne, #eagleTwo{
      filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
      filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
  
  #eagleTwo{
      display: none;
      filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
      -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code> $(document).ready(function(){
    $("#epic_home").on("mouseenter", "#eagleOne", function(){
      $("#eagleOne").fadeOut(2000);
      $("#eagleTwo").fadeIn(2000);
    });
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/rDVZY.png" alt="enter image description here"></p>