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

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

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

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

HTML5

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

jQuery

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

解決済

js imgを使ったaタグクリック時にfadeOutしたい

free_teku
free_teku

総合スコア82

CSS3

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

HTML5

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

jQuery

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

1回答

0評価

0クリップ

348閲覧

投稿2021/12/28 11:37

前提・実現したいこと

表題の通り、aタグで囲まれたimgをクリック時に、FadeOUt()させたい

試したこと

closeのclassをチェックしましたが、aタグ class=js-modal-close確認済みですが、
fadeOut()できない

該当のソースコード

HTML

<!DOCTYPE html> <html> <head> <title></title> <link href="./Top/asset/css/destyle.css" rel="stylesheet"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"><!--flatpicker--> <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"> </script> <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"> </script><!-- 日本語化 --> <link href="./Top/asset/css/style.css" rel="stylesheet"> </head> <body> <header class="header"> <div class="header-inner"> <div class="header-left"> <h1 class="logo"><a href="#"><img alt="" class="header-logo" src="./asserts/img/top-header-logo.png"></a></h1> <nav class="nav drawer-nav"> <ul class="header-list"> <li class="header-item"> <a href="./Room/room.html">お部屋</a> </li><!-- /.header-item --> <li class="header-item"> <a href="./Menu/menu.html">お料理</a> </li><!-- /.header-item --> <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a> </li><!-- /.header-item --> </ul><!-- /.header-list --> </nav><!-- /.nav --> </div> <div class="header-right"> <div class="header-link" id="js-modal"> <a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> --> 宿泊予約</a> </div><!-- /.header-link --> <button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button> </div><!-- /.header-right --> </div><!-- /.header-inner --> </header><!-- /.header --> <div class="overlay"></div><!-- /.overlay --> <!--modal --> <div class="modal js-modal"> <div class="modal__bg js-modal-close"></div><!-- /.modal__bg --> <div class="js-modal-content"> <div class="form-inner"> <figure class="form_img" id="js-close-calender"> <a class="js-modal-close close-img" href="#"><img alt="✖ボタン" src="./asserts/img/close.png"></a> </figure><!-- /#js-close-calender --> <h2 class="form-ttl">宿泊予約</h2><!-- /.form-ttl --> <hr class="bar"> <!-- modal-form --> <form action="x" class="form" id="js-form" name="js-form"> <ul class="form-list"> <!--1--> <li class="form-item"><label class="form-label" for="name">お名前</label> <input class="form_txt" name="name" placeholder="例:石井花壇" type="text"></li><!-- /.form-item --> <!--2--> <li class="form-item"><label class="form-label" for="mail">メールアドレス</label> <input class="form_txt" name="name" placeholder="例:example@example.com" type="text"></li><!--3--> <li class="form-item"><label class="form-plan form-label">ご希望プラン(空いているプランのみ表示されます)</label><!-- /.form-plan --> <select class="select-plan" name="宿泊プラン"> <optgroup> <option class="form_opption" value="hidden selected"> プランを選択してください </option> <option class="form_opption" value="1"> ➀【期間限定】海辺の四季旬彩、贅沢美味懐石プラン </option><!-- /.form_opption --> <option class="form_opption" value="2"> ➁平日に優雅に楽しむ、特別宿泊プラン </option><!-- /.form_opption --> <option class="form_opption" value="3"> ➂絶景貸切露天と個室会席を楽しむファミリープラン </option><!-- /.form_opption --> </optgroup> </select><!-- /# --></li><!-- /.form-item --> <!--4--> <li class="form-item"><label class="form-label" for="js-flatpickr">日時選択<input class="flatpickr" placeholder="日時を選択してください" readonly="readonly" type="text"></label></li><!-- /.form-item --> </ul><!-- /.form-list --> </form><!-- /.form --> </div><!-- /.form-inner --> <div class="form-close"> <a href="#">送信する</a> </div><!-- /.form-close --> </div><!-- /.modal-contents --> </div><!-- /.modal -->      <script src="./Top/Js/jquery-3.6.0.min.js"></script> <script src="./Top/Js/script.js"></script> </body> </html>

CSS

.overlay { content: ""; display: block; width: 0; height: 0; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; -webkit-transition: opacity .5s; transition: opacity .5s; } .overlay._open { width: 100%; height: 100%; opacity: 1; } .modal { display: none; height: 100%; position: fixed; top: 0; left: 0; width: 100%; z-index: 3; } .js-modal { /* display: block; width: calc(550 /1920*100%); height: calc(600/1080*100%); background-color: #fff; position: absolute; top: 50%; left: 50%; margin-right: 20px; border: 1px solid #707070; transform: translate(-50%,-50%); z-index: 100; */ } .js-modal .modal__bg { background: rgba(0, 0, 0, 0.6); height: 100%; position: absolute; width: 100%; } .js-modal .js-modal-content { background: #fff; padding: 40px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60%; position: relative; } @media screen and (max-width: 599px) { .js-modal .js-modal-content { width: 95%; padding: 20px; } } @media screen and (min-width: 1180px) { .js-modal .js-modal-content { width: 28%; min-width: 550px; padding: 20px 60px 90px 60px; } } .form-inner .form_img { width: 18px; height: 18px; } .form-inner h2 { font-size: 2rem; text-align: center; padding: 10px; } .form { margin-top: 28px; } .form-list .form-item input { border: 1px solid #E7E7E7; padding: 0 10px; width: 100%; line-height: 1; color: #797878; height: 32px; margin-top: 10px; } .form-list .form-item select { border: 1px solid #E7E7E7; padding: 0 10px; width: 100%; line-height: 1; color: #797878; height: 32px; margin-top: 10px; } .form-close { text-align: center; } .form-close > a { display: inline-block; width: 198px; margin-top: 64px; border: 1px solid #000; text-align: center; padding: 13px; line-height: 1; -webkit-transition: .3s; transition: .3s; }

JS

/* modal , .modal */ $(function () { $('.js-modal-open').on('click', function () { //$(".js-modal").toggleClass('_modal'); $('.js-modal').fadeIn(); return false; }); $('.js-modal-close').on('click', function () { $('.js-modal').fadeOut(); return false; }); });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

free_teku

2021/12/28 16:19

skys215さん、ご回答ありがとうございます。 JsやCSS設定はどのようにされていますか? 聞いた背景が、こちらで確認ができなかったからです。設定条件をそろえたほうが良いと思い、お伺いいたしました
skys215

2021/12/29 01:34

いや、私は何もしてません。たどコードを貼り付けただけです。
free_teku

2021/12/29 04:41

ご返信ありがとうございます。承知しました。別の箇所を確認し、再度ご連絡させていただきます。 年末にご回答ありがとうございます。
free_teku

2021/12/29 05:37 編集

おっしゃる通り反応あります。結論できました。ありがとうございます。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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

jQuery

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