Javascriptが反応しない原因について

<head>タグに<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>を入れて、新しくscript.jsファイルを作ってコードを書いたのですが、javascriptが反応しません。どこが原因かわからないので教えてください。

HTML
1コード
2<!DOCTYPE html>
3<html>
4  <head>
5    <link rel="stylesheet" href="stylesheet.css">
6    <meta charset="utf-8">
7    <title>PAS-POL</title>
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
9  </head>
10  <body>
11  <header>
12    <div class="header-container">
13        <div class="header-left">
14          <img class="logo" src="./img/siteLogo-pc@2x.png">
15        </div>
16      <div class="header-right">
17        <ul>
18          <li>
19            <a href="#">TOP</a>
20          </li>
21          <li>
22            <a href="#">PRODUCT</a>
23          </li>
24          <li>
25            <a href="#">ABOUT</a>
26          </li>
27          <li>
28            <a href="#">NEWS</a>
29          </li>
30          <li>
31            <a href="#">CONTACT</a>
32          </li>
33        </ul>
34      </div>
35    </div>
36  </header>
37

javascript
1
2コード
3$(function() {
4  $('.logo').hover(
5    function(){
6      $(this).animate({
7        'opacity': '0.8'
8      }, 200);
9    },
10    function(){
11      $(this).animate({
12        'opacity': '1'
13      }, 200);
14    });
15
16});
17