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

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

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

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

解決済

jQuery .addclass()を滑らかに動かしたい。

tkm0604
tkm0604

総合スコア494

jQuery

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

2回答

0リアクション

0クリップ

326閲覧

投稿2022/08/04 01:11

編集2022/08/04 04:14

jQuery .addclass()でサイバーの開閉を実装しましたが、サイドバーの開閉がカクカクしています。。。。

jQuery

// アコーディンオープン前 $(function () { $('.list-menu').click(function () { $(this).next().animate({ width: 'toggle' }); $('.side-bar__list-icon').addClass('close'); $('.side-bar-show').addClass('open'); }); }); // アコーディンオープン後 $(function () { $('.side-bar__menu').click(function () { $('.side-bar__list-icon').removeClass('close'); $('.side-bar-show').removeClass('open'); }); });

以下のように)click.delay(1000).queueとしてみたらサイドバーが開閉しなくなりました。。。。

jQuery

// アコーディンオープン前 $(function () { $('.list-menu').click.delay(1000).queue(function () { $(this).next().animate({ width: 'toggle' }); $('.side-bar__list-icon').addClass('close'); $('.side-bar-show').addClass('open'); }); }); // アコーディンオープン後 $(function () { $('.side-bar__menu').click.delay(1000).queue(function () { $('.side-bar__list-icon').removeClass('close'); $('.side-bar-show').removeClass('open'); }); });

HTML

<div class="side-bar"> <div class="side-bar__inner"> <div class="side-bar__list-icon"> <div class="list-icon__inner"> <ul> <li class="list-menu"> <!-- ハンバーガーメニューアイコン --> <svg class="menu" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"> <path class="Menu-icon-highligt" id="Menu-icon-highligt" d="M0,25V22H25v3ZM0,14V11H25v3ZM0,3V0H25V3Z" fill="#4ba0f0" /> </svg> </li> <li class="list-icon"><a href=""> <!-- お知らせアイコン --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> </svg> </a> </li> <li class="list-icon"><a href="B"> <!-- プロフィールアイコン --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> </svg> </a> </li> </ul> </div> </div> <div class="side-bar-show"> <!-- ハンバーガーメニューアイコン --> <svg class="menu side-bar__menu" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"> <path class="Menu-icon-highligt" id="Menu-icon-highligt" d="M0,25V22H25v3ZM0,14V11H25v3ZM0,3V0H25V3Z" fill="#fff" /> </svg> <ul class="side-bar-show__list"> <li class="show-menuーitem"><a class="show-menuーitem__link" href="A">お知らせ</a></li> <li class="show-menuーitem"><a class="show-menuーitem__link" href="B">プロフィール</a></li> </ul> </div> </div> </div>

CSS

.side-bar { background-color: #0f273e; position: relative; // height: 1080px; &__inner { display: flex; .side-bar__list-icon { cursor: pointer; padding: 30px 35px 0; width: 96px; .list-icon__inner { .list-icon { margin: 0 auto 40px; } .menu { margin-bottom: 51px; } .menu:hover #Menu-icon-highligt{ transition: all 0.6s ease; opacity: 0.8; fill: #fff; } } svg:hover #rectangle_112 { transition: all 0.6s ease; opacity: 0.8; color: #4ba0f0; stroke: #4ba0f0; } #rectangle_112:hover { transition: all 0.6s ease; opacity: 0.8; color: #4ba0f0; stroke: #4ba0f0; } #Icon_awesome-pen:hover { transition: all 0.6s ease; opacity: 0.8; fill: #4ba0f0; } #path_3:hover { transition: all 0.6s ease; opacity: 0.8; fill: #4ba0f0; stroke: #4ba0f0; } } //アコーディオン開時に元のメニューバーを隠す .close { display: none; transition: 10s; } /* ==================================================================== .side-bar アコーディオンOPEN時レイアウト ==================================================================== */ .side-bar-show { display: none; padding: 31px 39px; width: 400px; transition: 5.0s; .side-bar__menu { cursor: pointer; margin-bottom: 51px; } &__list { .show-menuーitem { &__link { align-items: center; color: #ffffff; display: flex; line-height: 1; margin-bottom: 40px; margin-right: 22px; @include f(21, 'Noto Sans JP', 25); } &__icon { margin-right: 22px; } &__link:hover{ opacity: 0.8; transition: all 0.6s ease; color: #4ba0f0; } &__link:hover #rectangle_112 { stroke: #4ba0f0; opacity: 0.8; transition: all 0.6s ease; } &__link:hover #Icon_awesome-pen { opacity: 0.8; stroke: #4ba0f0; fill:#4ba0f0; transition: all 0.6s ease; } &__link:hover #path_3{ opacity: 0.8; stroke: #4ba0f0; fill:#4ba0f0; transition: all 0.6s ease; } &__link:hover #user{ opacity: 0.8; stroke: #4ba0f0; transition: all 0.6s ease; } } .show-menuーitem:nth-of-type(2):hover { position: relative; .show-menuーitem__sub-menu { visibility: visible; opacity: 1; height: 88px; position: absolute; right: -130px; top: 50%; transform: translateY(-50%); width: 214.59px; transition: all 0.6s ease; .sub-menu-item-wrap { background-color: #193550; display: flex; flex-direction: column; padding: 11px 60px 13px 19px; position: relative; .sub-menu-item { &__link { color: #ffffff; line-height: 1.61; @include f(21, 'Noto Sans JP', 25); } } } .sub-menu-item-wrap::before { border-bottom: 18px solid transparent; border-right: 21px solid #193550; border-top: 18px solid transparent; content: ''; left: -21px; position: absolute; position: absolute; top: 50%; transform: translateY(-50%); } } } .show-menuーitem__sub-menu { visibility: hidden; opacity: 0; .sub-menu-item-wrap{ display: none; } } } .show-menuーitem:last-of-type { margin-bottom: 0; } .logout { border-top: 1px solid #ffffff; bottom: 10px; margin-bottom: 19px; position: absolute; width: 330px; &__inner { margin-top: 16px; &_link { display: flex; align-items: center; color: #ffffff; position: relative; @include f(16,"Rajdhani",62.5); } &_img { margin: 0 14px; } &_link:hover{ color: #4ba0f0; opacity: 0.8; transition: all 0.6s ease; } &_link:hover #loguot{ fill: #4ba0f0; opacity: 0.8; transition: all 0.6s ease; } } } } .open { display: block; transition: 10s; } .side-bar__menu:hover #Menu-icon-highligt{ opacity: 0.8; fill: #4ba0f0; transition: all 0.6s ease; } } }

どうすればスムーズにサイドバーの開閉ができるようになるでしょうか?

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/08/10 07:11

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

退会済みユーザー

退会済みユーザー

2022/08/04 01:13

まずは、addClass/removeClassしてるクラス名の定義を書き出そう。
tkm0604

2022/08/04 01:19

コメントありがとうございます。CSSも追記しました。
hatena19

2022/08/04 01:28

htmlコードも提示してください。 また、「サイドバーの開閉」とは具体的にどのような動作でしょうか。 サイドバーが左端または右端から出てくる(幅が変化、または、画面外から横移動)ということでしょうか。 その辺を詳細に説明してください。
退会済みユーザー

退会済みユーザー

2022/08/04 01:50

CSSにアニメーションの指定はなし?
退会済みユーザー

退会済みユーザー

2022/08/04 02:27

transitionするなら、width/heightをいじったり、top/leftをいじったり、opacityをいじったりするのが定番なような。displayってアニメーションかかる属性だったかなぁ。
tkm0604

2022/08/04 02:50 編集

hatena19さま XkUfuUdSPyGods2さま たびたび済みません。HTML追記しました。 サイドバーは左サイドにあり、アコーディオンは右に開いて、左に閉じていく方法での実装となります。 サイドバークローズ時は、アイコンのみ表示。 サイドバーオープン後はリストのテキストが表示 です。
hatena19

2022/08/04 03:03

cssコードも抜粋ではなく動作確認できるすべてを提示してください。 jsコードもそれだけですか。
tkm0604

2022/08/04 04:15 編集

hatena19 さま SCSSコード追記しました。 HTMLに関しては、全て書くと文字数の制限で載せられませんでした。。。。 JSコードに関しては全て記載しております。
hatena19

2022/08/04 04:34

SCSSコードがコンパイルエラーになり動作確認できませんので、考え方と、最低限のシンプルなCSSコード例を回答しましので、それを参考にして実装してください。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQuery

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