title: JQuery Import successful, but doesn't run
body: <p>I have the bare bones of what will eventually become a webpage, and am running it locally for the time being with XXAMP control panel.</p>
  
  <p>My plugin is successfully linking all of the necessary files and importing the outside stuff, but JQuery does not seem to work in my javascript file. Can someone help me out?</p>
  
  <p>Here are my imports:</p>
  
  <pre><code>    &lt;!-- Most Recent JQuery --&gt;
      &lt;script  src="https://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;!-- JQuery Box Shadown Plugin --&gt;
      &lt;script src="https://cdn.jsdelivr.net/jquery.shadow-animation/1/mainfile"&gt;&lt;/script&gt;
      &lt;!-- Most Recent Bootstrap --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"&gt;
      &lt;!-- Most Recent Bootsrap --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- Most Recent Font Awesome --&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;!-- Fancybox for Images/Iframes --&gt;
      &lt;link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" /&gt;
      &lt;!-- Custom CSS --&gt;
      &lt;link rel="stylesheet" href="css/custom.css"&gt;
      &lt;!-- Fancybox JS --&gt;
      &lt;script src="fancybox/jquery.fancybox.pack.js"&gt;&lt;/script&gt;
      &lt;!-- Custom JS --&gt;
      &lt;script src="javascript/javascript.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And here is the javascript file (the first is suppose to do what I want, the others are just for test cases):</p>
  
  <pre><code>$('#openIcon').hover(function(){
      console.log("Hovered");
      $('#openIcon').animate({
          boxShadow: "2px, 2px, 5px, #FFFFFF"
      }, 100, "linear");
  });
  
  $('#openIcon').click(function(){
      console.log("Clicked");
  });
  
  $('#openIcon').mouseenter(function(){
      console.log("Entered");
  });
  
  $('#openIcon').mouseleave(function(){
      console.log("Left");
  });
  </code></pre>
  
  <p>EDIT: I already found a post on this site about the same type of problem, where the guy didn't have the https: before the two slashes. This WAS a problem that I had, but have since fixed and it has made no change.</p>