<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css"> <style> .section { /* text-align: center;*/ font-size: 200%; } #menu li { display:inline-block; margin: 10px; color: #000; background:#fff; background: rgba(255,255,255, 0.5); -webkit-border-radius: 10px; border-radius: 10px; } #menu li.active{ background:#666; background: rgba(0,0,0, 0.5); color: #fff; } #menu li a{ text-decoration:none; color: #000; } #menu li.active a:hover{ color: #000; } #menu li:hover{ background: rgba(255,255,255, 0.8); } #menu li a, #menu li.active a{ padding: 9px 18px; display:block; } #menu li.active a{ color: #fff; } #menu{ position:fixed; top:0; left:0; height: 40px; z-index: 70; width: 100%; padding: 0; margin:0; } #section1{ background-size: cover; background-image: url(ari1.jpg); } .one{ color: #c5f7fe; font-family: 'A1 Mincho', serif; font-size: 80px; left: 0; letter-spacing: -0.05em; line-height: 1; position: absolute; /* text-align: center;*/ top: 400px; width: 100%; -webkit-box-reflect: below 0 -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.4, transparent), to(rgba(0,0,0,0.5))); text-shadow: 0 0 10px #fff,0 0 10px #fff; } .hide{ display:none; } .twoo{ font-size: 20px; list-style: none; margin-left: 20px; text-shadow: 0 0 10px #fff,0 0 10px #fff; } #section2{ background-size: cover; background-image: url(ari2.jpg); } #section3{ background-size: cover; background-image: url(ari3.jpg); } </style> </head> <body> <ul id="menu"> <li data-menuanchor="1page"><a href="#1page">①</a></li> <li data-menuanchor="2page"><a href="#2page">②</a></li> <li data-menuanchor="3page"><a href="#3page">③</a></li> <li data-menuanchor="4page"><a href="#4page">④</a></li> <li data-menuanchor="5page"><a href="#5page">⑤</a></li> <li data-menuanchor="6page"><a href="#6page">⑥</a></li> </ul> <div id="fullpage"> <div class="section" id="section1"> <p class="one">The Little Mermaid</p> </div> <div class="section" id="section2"> <p class="a"><input id="A" type="button" value="btn"></p> <ul class="hide"> <li class="twoo">16歳の人魚姫・アリエルは、地上に憧れる少女でした。</li> <li class="twoo">アリエルは好奇心旺盛で、王国の外の世界を見たくてたまりません。</li> <li class="twoo">しょっちゅう王国を抜けだしては、外の世界を冒険しました。</li> </ul> </div> <div class="section" id="section3">Some section</div> <div class="section" id="section4">4 section</div> <div class="section" id="section5">5 section</div> <div class="section" id="section6">⑥ section</div> </div> <script src="bubbleparticle.2.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script> <script> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['1page', '2page', '3page','4page','5page','6page'], menu: '#menu', sectionsColor: ['#AACF52', '#4BBFC3', '#7BAABE', '#E5E5E5'] //ここの''内の色を変えられます。 }); }); $(function() { $('.one').animate({ 'marginLeft': '550px' },2000); }); $('#A').click(function(e) { $('.twoo.hide').removeClass('hide'); $('.twoo').animate({ 'marginLeft': '550px' },2000); }); </script> </body> </html>
jQueryでボタンを押したら文字が表示され、指定の位置に移動させたいです。
現在、ボタンを押す前にも文字が表示されてしまっています。
どなたか解決できる方、力を貸していただけないでしょうか。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。