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

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

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

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

Q&A

解決済

2回答

1090閲覧

jQueryで、クリックしたときに連動してスライドするナビゲーションを作りたいです

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

0グッド

0クリップ

投稿2020/09/14 03:23

編集2020/09/14 03:54

前提・実現したいこと

閲覧ありがとうございます。

下記を満たすようなスライドするナビゲーションを作りたいです。
0. クリックしたアイテムが左にスライドする
0. スライド済みのアイテムをクリックすると、そのアイテムは閉じる
0. アイテムがスライド済みのときに他のアイテムをクリックすると、
スライド済みのアイテムは閉じてクリックしたアイテムのみスライドする。
0. 各アイテムはスライドする幅が違う

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

上記3番めの仕組みについて、
下記の画像のような動作を実現したいのですが、
どのように条件付をすればよいかが分かりません。

イメージ説明

よろしくお願いいたします。

該当のソースコード

HTML

1<div class="gnav"> 2 <ul> 3 <li class="gnav-item-1"></li> 4 <li class="gnav-item-2"></li> 5 <li class="gnav-item-3"></li> 6 <li class="gnav-item-4"></li> 7 </ul> 8</div><!-- /gnav -->

CSS

1.gnav ul { 2 display: flex; 3 align-items: center; 4 justify-content: flex-end; 5

jQuery

1$(function () { 2 $(".gnav-item-1").on("click", function () { 3 if ($(".gnav-item-1 ").css("margin-right") == "0px") { 4 $(".gnav-item-1").stop().animate({ marginRight: "230px" }, 500); 5 } else { 6 $(".gnav-item-1").stop().animate({ marginRight: "0px" }, 500); 7 } 8 }); 9 10 $(".gnav-item-2").on("click", function () { 11 if ($(".gnav-item-2 p").css("margin-right") == "0px") { 12 $(".gnav-item-1, .gnav-item-2") 13 .stop() 14 .animate({ marginRight: "150px" }, 500); 15 } else { 16 $(".gnav-item-1, .gnav-item-2") 17 .stop() 18 .animate({ marginRight: "0" }, 500); 19 } 20 }); 21 22 $(".gnav-item-3").on("click", function () { 23 if ($(".gnav-item-3").css("margin-right") == "0px") { 24 $(".gnav-item-2, .gnav-item-3") 25 .stop() 26 .animate({ marginRight: "190px" }, 500); 27 } else { 28 $(".gnav-item-2, .gnav-item-3") 29 .stop() 30 .animate({ marginRight: "0" }, 500); 31 } 32 }); 33 34 $(".gnav-item-4").on("click", function () { 35 if ($(".gnav-item-4 p").css("margin-right") == "0px") { 36 $(".gnav-item-3, .gnav-item-4") 37 .stop() 38 .animate({ marginRight: "115px" }, 500); 39 } else { 40 $(".gnav-item-3, .gnav-item-4") 41 .stop() 42 .animate({ marginRight: "0" }, 500); 43 } 44 }); 45});

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

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

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

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

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

yambejp

2020/09/14 03:38

手書きでいいので画像で具体的なイメージを例示できませんか?
退会済みユーザー

退会済みユーザー

2020/09/14 03:55

閲覧ありがとうございます。 情報不足ですみません。 画像を追加しましたので、ご確認をお願いいたします。
yambejp

2020/09/14 04:08

2→3の挙動は、緑だけ移動ではなく、一旦赤・青が右にもどってから、3つで移動で間違いないですね?
退会済みユーザー

退会済みユーザー

2020/09/14 04:11

はい、その挙動で間違いありません。
guest

回答2

0

ベストアンサー

アニメーションはCSSのアニメーションを使って、jQuery はクラスの追加、削除のみにするのが、シンプルだし、また、jQueryのアニメーションより軽いです。

css

1.gnav ul { 2 display: flex; 3 align-items: center; 4 justify-content: flex-end; 5 list-style: none; 6} 7.gnav ul li { 8 margin-right: 0px; 9 transition: margin-right .5s; 10} 11.gnav-item-1.move { 12 margin-right: 230px; 13} 14.gnav-item-2.move { 15 margin-right: 150px; 16} 17.gnav-item-3.move { 18 margin-right: 190px; 19} 20.gnav-item-4.move { 21 margin-right: 115px; 22}

jS

1$(function () { 2 $(".gnav ul li").click(function () { 3 4 //クリックしたli以外の全てのmoveを削除 5 $(".gnav ul li").not(this).removeClass("move"); 6 7 //クリックしたliのmoveをトグル 8 $(this).toggleClass("move"); 9 }); 10});

CodePenサンプル

投稿2020/09/14 04:52

編集2020/09/14 04:53
hatena19

総合スコア33620

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

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

退会済みユーザー

退会済みユーザー

2020/09/14 12:55

返事が遅くなり申し訳ありません。 理想通りの挙動となりました! jQueryよりCSSアニメーションの方が軽いのは知りませんでした! よりシンプルに記述できることもあり、hatena19さんの回答をベストアンサーとさせていただきます。 ご回答いただきありがとうございました!
guest

0

flexで右寄せするのをやめて要素をabsoluteにしてleft/rightを調整するほうが楽では?

投稿2020/09/14 03:40

編集2020/09/14 05:31
yambejp

総合スコア114581

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

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

yambejp

2020/09/14 05:31

とりあえず動くものをcodepenにあげておきました かなり汚い書き方なのでもう少し効率化できそうですが・・・
退会済みユーザー

退会済みユーザー

2020/09/14 13:03

返事が遅くなり申し訳ありません。 この度はご回答いただきありがとうございました。 flexにこだわらず、設計から見直すことも必要という教訓になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問