jQueryのフェードインの時間指定がうまくいかない

jQueryにてテキストのフェードインを実装したいのですが、フェードインの時間指定がうまくいきません。
フェードインはされるのですが、時間どおりにフェードしてくれません。

どなたか教えていただけないでしょうか？

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <title>Page Title</title>
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    
9    <script src="./js/jquery-3.3.1.js"></script>
10    
11    <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
12    <link rel="stylesheet" type="text/css" href="./css/html5reset-1.6.1.css">
13    <link rel="stylesheet" type="text/css" href="./css/top.css">
14    
15    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
16</head>
17
18<body>
19    <div id="back">
20    <div id="top">
21        <menu>
22            <ul>
23                <li><a href="profile.html">PROFILE</a></li>
24                <li><a href="#">WEB</a></li>
25                <li><a href="#">IDENTITY</a></li>
26                <li><a href="#">CONTACT</a></li>
27            </ul>
28            
29        </menu>
30    <!-- <img id="logo" src="./image/logo.png"> -->
31    <span id="top-text">NAME</span>
32    <span id="top-text-bottom">Portfolio.</span>
33    </div>
34    </div>
35    <script src="./js/top.js"></script>
36</body>
37</html>

jQuery
1$(function() {
2  // 一旦hide()で隠してフェードインさせる
3  $("#top-text").hide().fadeIn('3000');
4 
5});

css
1body{
2    font-family: 'Montserrat', sans-serif;
3    font-weight: lighter;
4}
5#back{
6    background-image: url(../image/top.jpg);
7    height: 100vh;
8    background-size: cover;
9}
10#back{
11width: 100%;
12position: relative;
13}
14#top img{
15    width: 100%;
16    height: 100vh;
17    object-fit: cover;
18}
19/* #logo{
20    position: absolute;
21    top: 33.5%;
22    left: 21%;
23}
24#logo img{
25    width: 100px;
26} */
27#top-text{
28    color: #F2F2F2;
29    font-size: 3.8em;
30    position: absolute;
31    top: 25%;
32    left:15%;
33}
34#top-text-bottom{
35   color: #F2F2F2;
36    font-size: 1.8em;
37    position: absolute;
38    top: 33.5%;
39    left: 25.5%;
40}
41menu{
42    width: 40%;
43    height: 50%;
44}
45ul{
46    position: absolute;
47    top: 69.5%;
48    left: 5%;
49}
50li{
51    line-height: 30px;
52    width: 10%;
53    color: white;
54    padding: 10px;
55    text-align: -webkit-match-parent;
56
57}
58li a{
59    text-decoration: none;
60    list-style: none;
61    color: white;
62    position: relative;
63    display: inline-block;
64    transition: .3s;
65}
66  a::after {
67    position: absolute;
68    bottom: 4.6px;
69    left: 0;
70    content: '';
71    width: 0;
72    height: 1px;
73    background-color: white;
74    transition: .3s;
75  }
76  a:hover::after {
77    width: 100%;
78  }

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

回答1件

ベストアンサー

jQuery
1$("#top-text").hide().fadeIn('3000');
2↓
3$("#top-text").hide().fadeIn(3000);

ではどうなりますか？（未検証）

投稿2019/02/28 08:51

SakuBlade

総合スコア375

kings_of_king12

2019/02/28 08:55

ありがとうございます！無事時間指定することができました。加えてなのですが、このフェードを横からフェードインさせるにはどうしたらよろしいでしょうか？

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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

jQueryのフェードインの時間指定がうまくいかない

関連した質問