jQueryを用いた要素の移動、アニメーション

jQueryを用いて、boxを斜め下に移動させる、という処理（アニメーション）を行いたいと思っております。

$("#box").click(function(){
  $("#box").animate({
    "top":"120px",
        "left":"150px"
  });
}

この文章を使って、移動させたい場所の座標を指定してあげる、というところまでは理解できたのですが、なぜか正常に作動しません。カッコの閉じ忘れやコロン、セミコロンのつけ忘れなどの確認をしてみたりしたのですが、何も変わりませんでした。何か文法的に間違っていることがあるのであれば、ご教授頂けますでしょうか。

jQuery
1$(function() {
2    // ここに処理を記述
3    $("#button").click(function(){
4      $("#button").animate
5      ({  "top":"120px",
6            "left":"150px"      });
7     });

このjQueryコードのなかのことなのですが、カッコの付け方など間違っているところはございますか？ここが原因で動作しないようなのですが、、、

htmlコード↓

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>アニメーション</title>
6  <link rel="stylesheet" type="text/css" href="base.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script>
8  $(function() {
9    // ここに処理を記述//
10    $("#box").click(function(){
11      $("#box").animate({
12        "top":"120px",
13            "left":"150px"
14      });
15
16    }
17
18
19  });
20  </script>
21</head>
22
23<body>
24  <div id="box">
25    <p id="box">button</p>
26  </div><!-- button -->
27
28
29</body>
30</html>

css
1@charset "UTF-8";
2/* reset */
3body, h1, h2, h3, h4, h5, h6, p, address,
4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
5  margin: 0;
6  padding: 0;
7  border: none;
8  font-style: normal;
9  font-weight: normal;
10  font-size: 100%;
11  text-align: left;
12  list-style-type: none;
13  border-collapse: collapse;
14}
15
16textarea { font-size: 100%; vertical-align:middle;}
17img { border-style: none; display: block; }
18hr { display: none; }
19em{font-style: normal}
20input{line-height:auto;vertical-align:middle;}
21strong.more{color:#c30}
22a{text-decoration: none;}
23
24html {
25
26}
27
28body {
29  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
30}
31
32* {
33  -webkit-box-sizing: border-box;
34  -moz-box-sizing: border-box;
35  -o-box-sizing: border-box;
36  -ms-box-sizing: border-box;
37  box-sizing: border-box;
38}
39
40/* 下記部分 */
41
42#box {
43  width: 320px;
44  height: 180px;
45  background-color: #fdd;
46  cursor: pointer;
47}
48
49#box p {
50  line-height: 180px;
51  font-size: 30px;
52  text-align: center;
53  position:absolute;
54  top:0px;
55  left:0px;
56}