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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/28 08:55