Provisional headers are shownでjsが読み込まれない？

今回、https://codepen.io/PaulVanO/pen/GgGeyEのメニューエフェクトを使用しようとしているのですが、エフェクトが上手く機能しません。

エラーとしては、
0.
Provisional headers are shown
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.108 Safari/537.36
くらいしかデベロッパーツールでは確認出来ません。
コンソールには何も表示されませんでした。
また、statusにはFinishedと表示されます。
これはどういう意味なのでしょうか。。

なにが問題か、特定頂けませんでしょうか。。。。
お願いします。

###HTML

HTML
1<!doctype html>
2
3<head>
4	<meta charset="utf-8" />
5	<meta name="viewport" content="width=device-width, initial-scale=1" />
6	<link rel="profile" href="https://gmpg.org/xfn/11" />
7    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
8    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
9	<script type="text/javascript" src="main.js"></script>
10  <link rel="stylesheet" media="all" href="style.css" />
11  <link rel="stylesheet" media="all" href="https://daneden.github.io/animate.css/animate.min.css" />
12  
13</head>
14<body>
15  <div class="container">
16    <h1>Top right corner, click it!</h1>
17    <p>View type 2 <a href="https://codepen.io/PaulVanO/pen/GgGeyE" target="_blank">here</a></p>
18  </div>
19  
20  <div class="button_container" id="toggle">
21    <span class="top"></span>
22    <span class="middle"></span>
23    <span class="bottom"></span>
24  </div>
25  
26  <div class="overlay" id="overlay">
27    <nav class="overlay-menu">
28      <ul>
29        <li ><a href="#">Home</a></li>
30        <li><a href="#">About</a></li>
31        <li><a href="#">Work</a></li>
32        <li><a href="#">Contact</a></li>
33      </ul>
34    </nav>
35  </div>
36</body>

###コンパイル済みCSS

css
1@import url(https://fonts.googleapis.com/css?family=Vollkorn|Roboto);
2
3body {
4    background: #f5f5f5
5}
6
7.container {
8    position: absolute;
9    width: 100%;
10    height: 100%;
11    text-align: center;
12    top: 40%;
13    left: 0;
14    margin: 0 auto;
15    font-family: "Roboto", sans-serif
16}
17
18.container p {
19    font-size: 20px
20}
21
22.container a {
23    display: inline-block;
24    position: relative;
25    text-align: center;
26    color: #ff5252;
27    text-decoration: none;
28    font-size: 20px;
29    overflow: hidden;
30    top: 5px
31}
32
33.container a:after {
34    content: "";
35    position: absolute;
36    background: #ff5252;
37    height: 2px;
38    width: 0%;
39    transform: translateX(-50%);
40    left: 50%;
41    bottom: 0;
42    transition: 0.35s ease
43}
44
45.container a:hover:after {
46    width: 100%
47}
48
49h1 {
50    position: relative;
51    text-align: center;
52    font-family: "Vollkorn", sans-serif
53}
54
55.button_container {
56    position: fixed;
57    top: 5%;
58    right: 2%;
59    height: 27px;
60    width: 35px;
61    cursor: pointer;
62    z-index: 100;
63    transition: opacity 0.25s ease
64}
65
66.button_container:hover {
67    opacity: 0.7
68}
69
70.button_container.active .top {
71    transform: translateY(10px) translateX(0) rotate(45deg);
72    background: #fff
73}
74
75.button_container.active .middle {
76    opacity: 0;
77    background: #fff
78}
79
80.button_container.active .bottom {
81    transform: translateY(-10px) translateX(0) rotate(-45deg);
82    background: #fff
83}
84
85.button_container span {
86    background: #ff5252;
87    border: none;
88    height: 5px;
89    width: 100%;
90    position: absolute;
91    top: 0px;
92    left: 0;
93    transition: all 0.35s ease;
94    cursor: pointer
95}
96
97.button_container span:nth-of-type(2) {
98    top: 10px
99}
100
101.button_container span:nth-of-type(3) {
102    top: 20px
103}
104
105.overlay {
106    position: fixed;
107    top: 0;
108    left: 0;
109    width: 100%;
110    height: 100%;
111    opacity: 1;
112    visibility: hidden;
113    transition: opacity 0.35s, visibility 0.35s, width 0.35s;
114    z-index: 50
115}
116
117.overlay:before {
118    content: "";
119    background: #ff5252;
120    left: -55%;
121    top: 0;
122    width: 50%;
123    height: 100%;
124    position: absolute;
125    transition: left 0.35s ease
126}
127
128.overlay:after {
129    content: "";
130    background: #ff5252;
131    right: -55%;
132    top: 0;
133    width: 50%;
134    height: 100%;
135    position: absolute;
136    transition: all 0.35s ease
137}
138
139.overlay.open {
140    opacity: 0.9;
141    visibility: visible;
142    height: 100%
143}
144
145.overlay.open:before {
146    left: 0
147}
148
149.overlay.open:after {
150    right: 0
151}
152
153.overlay.open li {
154    animation: fadeInRight 0.5s ease forwards;
155    animation-delay: 0.35s
156}
157
158.overlay.open li:nth-of-type(2) {
159    animation-delay: 0.45s
160}
161
162.overlay.open li:nth-of-type(3) {
163    animation-delay: 0.55s
164}
165
166.overlay.open li:nth-of-type(4) {
167    animation-delay: 0.65s
168}
169
170.overlay nav {
171    position: relative;
172    height: 70%;
173    top: 50%;
174    transform: translateY(-50%);
175    font-size: 50px;
176    font-family: "Vollkorn", serif;
177    font-weight: 400;
178    text-align: center;
179    z-index: 100
180}
181
182.overlay ul {
183    list-style: none;
184    padding: 0;
185    margin: 0 auto;
186    display: inline-block;
187    position: relative;
188    height: 100%
189}
190
191.overlay ul li {
192    display: block;
193    height: 25%;
194    height: calc(100% / 4);
195    min-height: 50px;
196    position: relative;
197    opacity: 0
198}
199
200.overlay ul li a {
201    display: block;
202    position: relative;
203    color: #fff;
204    text-decoration: none;
205    overflow: hidden
206}
207
208.overlay ul li a:hover:after,
209.overlay ul li a:focus:after,
210.overlay ul li a:active:after {
211    width: 100%
212}
213
214.overlay ul li a:after {
215    content: "";
216    position: absolute;
217    bottom: 0;
218    left: 50%;
219    width: 0%;
220    transform: translateX(-50%);
221    height: 3px;
222    background: #fff;
223    transition: 0.35s
224}
225
226@keyframes fadeInRight {
227    0% {
228        opacity: 0;
229        left: 20%
230    }
231
232    100% {
233        opacity: 1;
234        left: 0
235    }
236}

###JS

JS
1(function() {
2  $('#toggle').click(function() {
3    $(this).toggleClass('active');
4    $('#overlay').toggleClass('open');
5   });
6})();

行動規範の内容に同意します

回答1件

ベストアンサー

<head>タグの中に<script>を書いてjsファイルを読み込む場合、そのファイルが実行される時点ではまだ<body>タグの中が解析されておらずDOMツリーが存在しません。なので `$('#toggle')` などのようにDOMを取得しようとしても何も取得できずに終わります。

js の1行目と最後の行を以下のように書き換えてください。

js
1$(function() {
2  // 中はそのまま
3});

これにより<body>タグの中の解析が終わってDOMツリーが構築されたあとにコードを実行させることができます。

別解として <script> タグを <body>タグの中の一番最後に書くというのもあります。

html
1<body>
2  <!-- 省略 -->
3
4  <script src="main.js"></script>
5</body>

投稿2019/04/27 07:39

wtokuno

総合スコア448

pasomtr

2019/04/29 03:50

wtokuno様本当にありがとう御座います！！ご丁寧なアドバイスで大変わかりやすく心より感謝申し上げます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Provisional headers are shownでjsが読み込まれない？

関連した質問