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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

945閲覧

JQueryで文字が横から順番に出てくるメニューを作りたい

lingwood

総合スコア40

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

3クリップ

投稿2019/10/10 07:04

編集2019/10/10 07:52

前提・実現したいこと

文字が横からスッスッスッと順番に出てきて、
閉じる時も順番に消えていく、
というメニューを作成したいです。

イメージとしては、

ああああ ← 1 1s
いいいい ← 2 1.2s
うううう ← 3 1.4s
ええええ ← 4 1.6s
おおおお ← 5 1.8s

ああああ → 5 1.8s
いいいい → 4 1.6s
うううう → 3 1.4s
ええええ → 2 1.2s
おおおお → 1 1s

遅延表示・非表示する感じです。

順番は上からでも下からでも良いですが、
自分で指定できるとうれしいです。

JQueryのToggleクラスを使っていますが、
他に良い方法などもあれば併せて教えてください。

発生している問題・エラーメッセージ

途中までは何となく思い通りの感じになってきたのですが、
・連打したりWindowサイズを変更して戻すと順番がバラバラになる
・非表示の際にパッと消えてしまう
なども問題が発生しています。

該当のソースコード

JQuery

1<script> 2$(function(){ 3 $("#gmb13").on("click", function() { 4 $(this).toggleClass("active"); 5 $("nav .gml13").toggleClass('active'); 6 7 if ($("nav .gml13").hasClass('active')) { 8 $('ul.delay-show li') 9 .css({ 10 left : '40px', 11 opacity: 0 12 }) 13 .each(function(i){ 14 $(this).delay(300 * i) 15 .animate({ 16 left : '0', 17 opacity: 1 18 }, 700); 19 }); 20 21 } else { 22 $('ul.delay-show li') 23 .css({ 24 left : '0px', 25 opacity: 1 26 }) 27 .each(function(i){ 28 $(this).delay(300 * i) 29 .animate({ 30 left : '40px', 31 opacity: 0 32 }, 700); 33 }); 34 } 35 }); 36}); 37$(window).resize(function(){ 38if(window.matchMedia('(max-width:800px)').matches){ 39 } else { 40 $('#gmb13').removeClass('active'); 41 $('nav .gml13').removeAttr('style'); 42 } 43}); 44</script>

HTML

1<!-- global menu button --> 2<div id="gnavi13"> 3<div id="gmb13"> 4<div> 5 <span></span> 6 <span></span> 7 <span></span> 8</div> 9<p class="offlabel">MENU</p> 10<p class="onlabel">CLOSE</p> 11</div> 12 13<!-- global menu --> 14<nav> 15<ul class="gml13 delay-show"> 16<li><a href="index.html">Home</a></li> 17<li><a href="about.html">マッサージ</a></li> 18<li><a href="works.html">よもぎ蒸し</a></li> 19<li><a href="link.html">料金案内</a></li> 20<li><a href="contact.html">ご相談</a></li> 21</ul> 22</nav> 23</div>

CSS

1/*13.横から出てくるメニュー改編中 2=======================================================================*/ 3#gnavi13 .gml13 { 4 display: block; 5} 6#gmb13 { 7 display: none; 8} 9 10@media screen and (max-width: 800px) { 11#gnavi13 { 12 position: relative; 13} 14#gnavi13 .gml13 { 15 display: none; 16} 17 18/* メニューボタン */ 19#gmb13 { 20 display: block; 21 position: fixed; 22 position: absolute; 23 position: relative; 24 right: 42px; 25 top: 0; 26 left: 0; 27 width: 42px; 28 height: 48px; 29 padding: 24px 8px; 30 cursor: pointer; 31 z-index: 1; 32 -webkit-transition: all 1s; 33 transition: all 1s; 34 background-color: rgba(255,255,255,0.3); /* ボタン背景 */ 35} 36 37#gmb13 p { 38 margin-top: 32px; 39 margin-left: 0; 40 font-size: 16px; 41 color: #fff; 42} 43 44#gmb13 div { 45 position:relative; 46} 47 48#gmb13 span { 49 display:block; 50 position:absolute; 51 width:100%; 52 border-bottom:solid 1px #fff; /* バーの色 */ 53 -webkit-transition: .35s ease-in-out; 54 transition: .35s ease-in-out; 55} 56#gmb13 span:nth-child(1) { 57 top:0; 58} 59#gmb13 span:nth-child(2) { 60 top: 12px; 61} 62#gmb13 span:nth-child(3) { 63 top: 24px; 64} 65 66/* open */ 67 68#gmb13.active { 69 background-color: rgba(255,255,255,0.6); /* ボタンの色 */ 70} 71 72#gmb13.active .offlabel { 73 display: none; 74} 75 76#gmb13 .onlabel { 77 display: none; 78} 79 80#gmb13.active .onlabel { 81 display: block; 82 color: #fff; 83} 84 85#gmb13.active span:nth-child(1) { 86 top: 7px; 87 -webkit-transform:rotate(-45deg); 88 transform:rotate(-45deg); 89 border-color: #fff; 90} 91 92#gmb13.active span:nth-child(2){ 93 opacity: 0; 94} 95 96#gmb13.active span:nth-child(3) { 97 top: 7px; 98 -webkit-transform:rotate(45deg); 99 transform:rotate(45deg); 100 border-color: #fff; 101} 102 103/* 中身 */ 104nav { 105 width: 300px; 106 margin: 0 auto; 107} 108ul.delay-show li { 109 background: #fff; 110 color: #4a3b35; 111 margin-bottom: 5px; 112 list-style: none; 113 padding: 10px; 114 position: relative; 115 border-radius: 10px; 116 -webkit-border-radius: 10px; 117 -moz-border-radius: 10px; 118} 119ul.delay-show.active { 120 display: block !important; 121} 122}

かなりハマッてしまっており、すみませんがお力添えお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/10/10 08:27

右から入ってくるのは画面の右端?それとも途中からなんとなく?
lingwood

2019/10/10 08:51

yambejp 様 気に留めていただいてありがとうございます! どちらでも大丈夫です。 上記コードの場合は、右端から隠れているものがスライドしてくるという 感じではなく、途中からフェードインしてくる感じでした。 こちらでも良いのですが、両方ともできるようになれれば、 サイトのイメージに合せた挙動が組めるのですごく助かります。 グローバルメニューで使います。 よろしくお願いします。
guest

回答1

0

ベストアンサー

とりあえずこれで

javascript

1<script> 2$(function(){ 3 $('#menu div').hide(); 4 $('#btn').on('click',function(){ 5 var val=$(this).val()=="show"?"hide":"show"; 6 $(this).val(val); 7 if(val=="hide"){ 8 $('#menu div').each(function(x){ 9 $(this).css({"padding-left":100,opacity:0}).delay(1000+200*x).show().animate({"padding-left":0,opacity:1}); 10 }); 11 }else{ 12 $('#menu div').each(function(x){ 13 $(this).delay(1000+200*(5-x)).animate({"padding-left":100,opacity:0}).queue(function(){ 14 $(this).hide().dequeue(); 15 }); 16 }); 17 } 18 }); 19}); 20</script> 21test 22<input type="button" value="show" id="btn"> 23<div id="menu"> 24<div>あああ</div> 25<div>いいい</div> 26<div>ううう</div> 27<div>えええ</div> 28<div>おおお</div> 29</div> 30test

調整版

javascript

1<script> 2var flg=true; 3$(function(){ 4 $('#menu div').hide(); 5 $('#btn').on('click',function(){ 6 if(flg){ 7 flg=false; 8 var val=$(this).text()=="show"?"hide":"show"; 9 $(this).text(val); 10 if(val=="hide"){ 11 $.when( 12 $('#menu div').each(function(x){ 13 $(this).css({"padding-left":100,opacity:0}).delay(200*x).show().animate({"padding-left":0,opacity:1}); 14 })).done(function(){ 15 flg=true; 16 }); 17 }else{ 18 $.when( 19 $('#menu div').each(function(x){ 20 $(this).delay(200*($('#menu div').length-1-x)).animate({"padding-left":100,opacity:0}).queue(function(){ 21 $(this).hide().dequeue(); 22 }) 23 })).done(function(){ 24 flg=true; 25 }); 26 } 27 } 28 }); 29}); 30</script> 31test 32<div id="btn">show</div> 33<div id="menu"> 34<div>あああ</div> 35<div>いいい</div> 36<div>ううう</div> 37<div>えええ</div> 38<div>おおお</div> 39</div> 40test

本番組込版

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3var flg=true; 4$(function(){ 5 $('#gmb13').on('click',function(){ 6 if(flg){ 7 flg=false; 8 $(this).toggleClass("CLOSE"); 9 if($(this).is(':not(.CLOSE)')){ 10 $.when( 11 $('.gml13 li').each(function(x){ 12 $(this).css({"padding-left":100,opacity:0}).delay(200*x).queue(function(){ 13 $(this).show().animate({"padding-left":0,opacity:1}).dequeue(); 14 }) 15 })).done(function(){ 16 flg=true; 17 }); 18 }else{ 19 $.when( 20 $('.gml13 li').each(function(x){ 21 $(this).delay(200*($('.gml13 li').length-1-x)).animate({"padding-left":100,opacity:0}).queue(function(){ 22 $(this).hide().dequeue(); 23 }) 24 })).done(function(){ 25 flg=true; 26 }); 27 } 28 } 29 }); 30}); 31</script> 32<div id="gnavi13"> 33<div id="gmb13">gmb13() 34<div> 35 <span></span> 36 <span></span> 37 <span></span> 38</div> 39<p class="offlabel">MENU</p> 40</div> 41 42<!-- global menu --> 43<nav> 44<ul class="gml13 delay-show"> 45<li><a href="index.html">Home</a></li> 46<li><a href="about.html">マッサージ</a></li> 47<li><a href="works.html">よもぎ蒸し</a></li> 48<li><a href="link.html">料金案内</a></li> 49<li><a href="contact.html">ご相談</a></li> 50</ul> 51</nav> 52</div> 53<hr>

投稿2019/10/10 09:12

編集2019/10/11 03:27
yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/10/10 09:14

連打対策とか入れてません どういう動きを希望するかによります
lingwood

2019/10/10 09:40

yambejp 様 さっそくありがとうございます! すごいです!動きとしてはイメージ通りです!! いくつかお願いがあるんですが、連打対策も欲しいです。 あと、入ってくる際にワンクッション置かれたような間があるのですが、 押した瞬間、スッと入ってくるようにというのもできるのでしょうか? それと本当にワガママいってすみませんが、 <button>ではなくdiv要素をクリックして実現させるようにできないでしょうか? お時間ある時で構いません。 引き続き教えていただけたらとても助かります。 よろしくお願いします。
yambejp

2019/10/10 09:49 編集

> 連打対策 連打できなければいいですか? (処理が終わるまでボタン押せない) > 入ってくる際にワンクッション 命題が1秒まってみたいな記載になってませんか? ※調整版で動作確認ください
lingwood

2019/10/10 10:37

yambejp 様 ありがごうございます!! さすがです!! こちらで期待していた動きになっています。 あと、1秒待ってというのは間違いですね・・・すみません。 自分もご指摘を受けて気づきました。 コードちゃんと解釈して次にも活かしたいと思います!! 本当に助かりました。 またよろしくお願い致します。
lingwood

2019/10/11 01:41

yambejp 様 おはようございます! すみません、昨日教えていただいたコードですが、 既存のボタンに組み込もうとすると、文字に変化してしまいます。 コードを良く拝見したところ、テキストで状態判定をしているようなので、 うまく既存のボタンに組み入れる方法などはないでしょうか? 恐らく、var val=$(this).text()=="show"?"hide":"show";の辺りが 影響しているのではないかと思いましたが、 すみませんが、よろしくお願いします。
yambejp

2019/10/11 01:55 編集

仕様を教えて下さい ・最初にメニューは表示されている? ・CLOSEを押すとメニューが消える? ・CLOSEはOPENにしていい? 本番組込版で動作確認ください(一部見え方を微調整してあります)
lingwood

2019/10/11 02:06

yambejp 様 追記ありがとうございます! バーガーメニューの下にテキストを入れる場合もありますが入れない場合もあり、 入れないパターンで試行していました。 上記コードでいう $('.onlabel').on('click',function(){ の.onlabelの部分に ボタンに付与したIDを設定したところ、前述したような症状が出てしまいました。 テキストはopacityなどで隠せばよかったですし、何とか工夫してみたいと思います。 本番組み込み用のものまで作っていただいてすごく助かりました。 お騒がせしてすみません。ありがとうございました!!
lingwood

2019/10/11 02:11

すみません、仕様を書き忘れていました。 仕様は、 ・バーガーメニューでwidth500px前後で出現します。 ・バーガーメニューの下にOPEN・CLOSEなどの文字を入れるか入れないか調整中でした。 ・試行していた時は、入れないパターンでやっていました。 opacityなどでテキストを隠さなくて出来ると良いのですが、難しいですよね? もしできるようなら、お時間ある時に教えてもらえたらホント助かります! ちゃんとしたご回答をしておらず、失礼いたしました。
yambejp

2019/10/11 02:16

> 入れないパターン その場合文字がないのに何を押したらmenuの開閉ができるのでしょうか? 画像的ななにかですか?
lingwood

2019/10/11 02:41 編集

スマホメニューに良くある3本線のバーガーメニューを押します。ボタンアクションをつけたいため、バーガーメニューはCSSで形成して3本線→×になるような動きをつけています。 コードですと、以下の部分になります。 <div id="gmb13"> <div> <span></span> <span></span> <span></span> </div> そのため、クリック要素となるidをgmb13に設定していました。 トグルクラスでやっていたため、指定したIDで開閉ができていましたが、 そこまで簡単ではない、ということだと理解しました。。。 いかがでしょうか・・・?
yambejp

2019/10/11 03:27

#gmb13のクリックとクラスの付替えで処理するように変更しておきました
lingwood

2019/10/11 04:50 編集

yambejp 様 ありがとうございました!! こちらで完璧になりました。 自分なりに教えて頂いていたコードのif($(this).is(':not(.CLOSE'))のあたりの .isをattrにしてみたりaddClassにしてみたりといろいろしてみていたのですが、 いっこうに出来る気配がなかったです。 今、試行しまして、開いた状態を閉じた状態に反転させることもできました。 いろいろなパターンで教えて下さって本当に助かりました!! ありがとうございました!!またよろしくお願い致しますm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問