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    <script src="./js/top.js"></script>
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<body>
18    <div id="back">
19    <div id="top">
20        <menu>
21            <ul>
22                <li><a href="profile.html">PROFILE</a></li>
23                <li><a href="#">WEB</a></li>
24                <li><a href="#">IDENTITY</a></li>
25                <li><a href="#">CONTACT</a></li>
26            </ul>
27            
28        </menu>
29    <!-- <img id="logo" src="./image/logo.png"> -->
30    <span id="top-text">NAME</span>
31    <span id="top-text-bottom">title</span>
32    </div>
33    </div>
34</body>
35</html>

jQuery
1$("#top-text").css({
2    left:"100px",
3    opacity:"0.0"
4}).hide().animate({
5    left:"100px",
6    opacity:"1.0"
7},5000);

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  }

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

回答4件

スクリプトを読む場所を考えましょう。
jQuery も #top-text も出現していない場所では動きません。

HTML
1<script src="./js/top.js"></script>
2</body>

投稿2019/02/28 08:14

x_x

総合スコア13749

kings_of_king12

2019/02/28 08:18

ありがとうございます。記述の場所を変えてみました。そうですね。非表示状態でないと出現もできないことを忘れていました。書き直してhide()で隠して出現させようとしたのですが、うまくいきません。

x_x

2019/02/28 08:22

ちょっと何を言っているのかわかりません。スクリプト自体は最初のものでいいのでは？

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

opacity:0した上でさらにhideしている意味がわかりません
animateでopacity:1にしてもhideされてたら表示されないですよね

javascript
1<script>
2$(function() {
3  $("#top-text").css({left:100,opacity:0}).animate({opacity:1},5000);
4});
5</script>
6<div id="back">
7<div id="top">
8<menu>
9<ul>
10<li><a href="profile.html">PROFILE</a></li>
11<li><a href="#">WEB</a></li>
12<li><a href="#">IDENTITY</a></li>
13<li><a href="#">CONTACT</a></li>
14</ul>
15</menu>
16<span id="top-text">NAME</span>
17<span id="top-text-bottom">title</span>
18</div>
19</div>

追記

横方向の処理はjQuery-uiを利用します

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function() {
4  $("#top-text").css({opacity:0}).hide().animate({opacity:1,width:'toggle'}, 1000 );
5});
6</script>
7<div id="back">
8<div id="top">
9<menu>
10<ul>
11<li><a href="profile.html">PROFILE</a></li>
12<li><a href="#">WEB</a></li>
13<li><a href="#">IDENTITY</a></li>
14<li><a href="#">CONTACT</a></li>
15</ul>
16</menu>
17<span id="top-text">NAME</span>
18<span id="top-text-bottom">title</span>
19</div>
20</div>

投稿2019/02/28 09:00

編集2019/02/28 09:21

yambejp

総合スコア114777

kings_of_king12

2019/02/28 09:05

ありがとうございます。そうですね。意味のないことをしていました。記載してくれたコードで実行するとたしかにフェードしました。が、横からスライドしてフェードさせたいのですが、このコードでは位置がずれて出現するだけでスライドできないのですが、スライドさせる場合はどのようにしたらよろしいでしょうか？

yambejp

2019/02/28 09:22

横方向処理追記しておきました

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

    <script src="./js/top.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

↑ この2行、順序逆では？

投稿2019/02/28 08:15