JavaScript jquary

実現したいこと

画像表⽰時にボタンをクリックすると

画像がフェードアウトするボタンの⽂字が「フェードインする」に変わる

画像⾮表⽰時にクリックすると

画像がフェードインするボタンの⽂字が「フェードアウトする」に変わる

発生している問題・分からないこと

エラーはこちらでは確認できませんが、フェードイン、フェードアウトができていないと言われました。

エラーメッセージ

error
1$(".img").stop().fadeToggle(0);
2↓
3$(".img").stop().fadeToggle(1000);
4上記にするとフェードイン、フェードアウトが適用されなくなってしまう。

該当のソースコード

script.js
1$(".btn-space").on("click", ".btn", function(){
2  $(".img").stop().fadeToggle(0);
3  if ($(".img").css("display") == "block") {
4    $(".btn").text("フェードアウトする");
5    
6  }else {
7    $(".btn").text("フェードインする");
8    
9  }
10
11  if ($(".img").css("display") == "none") {
12    $(".btn").text("フェードインする");
13    
14  }else {
15    $(".btn").text("フェードアウトする");
16    
17  }
18    
19});
20

html
1
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="UTF-8">
6  <title>フェードイン・フェードアウト</title>
7  <link rel="stylesheet" type="text/css" href="style.css">
8  <link href = " https://unpkg.com/sanitize.css " rel = " stylesheet " />
9</head>
10<body>
11
12  <div class="space">
13    <div class="btn-space">
14      <button class="btn">フェードアウトする</button> 
15    </div>
16    <div class="img-space">
17      <img class="img" src="./images/vision.png">
18    </div>
19  </div>
20
21  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
22  <script src="script.js"></script>
23</body>
24</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ソースコードを自分なりにGoogleなどで調べました。
解決策が分からずどなたかご教授お願いいたします。

補足

特になし

Lhankor_Mhy

2024/11/13 08:58

『エラーはこちらでは確認できませんが、フェードイン、フェードアウトができていないと言われました。』とのことですが、伝聞形なのが気になりました。フェードイン、フェードアウトできていないことを、ご自身の目で確認したわけではないということですか？

行動規範の内容に同意します

回答2件

まず、 fadeToggle はアニメーションが完了した後に display が変更されるのでアニメーションを完了するまで待つ必要があります。

jQuery は .promise() でアニメーション後に完了する Promise を返すので await で待てる様に function を async function に変更した上で次の様にすればいいのではないでしょうか？

js
1$(".btn-space").on("click", ".btn",async function(){
2  await $(".img").stop().fadeToggle(1000).promise();
3  if ($(".img").css("display") == "block") {
4    $(".btn").text("フェードアウトする");
5    
6  }else {
7    $(".btn").text("フェードインする");
8    
9  }
10
11  if ($(".img").css("display") == "none") {
12    $(".btn").text("フェードインする");
13    
14  }else {
15    $(".btn").text("フェードアウトする");
16    
17  }
18    
19});

参考

投稿2024/11/14 00:55

編集2024/11/14 04:22

juner

総合スコア453

html次第でしょうね・・・

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2<script>
3$(function(){
4  $(".btn-space").on("click", ".btn", function(){
5    $(".img").stop().fadeToggle().queue(function(){
6      var txt=$(this).is(':hidden')?"フェードインする":"フェードアウトする";
7      $(".btn").text(txt);
8      $(this).dequeue();
9    });
10  });
11});
12</script>
13<div class="space">
14<div class="btn-space">
15<button class="btn">フェードアウトする</button> 
16</div>
17<div class="img-space">
18<img class="img" src="https://placehold.jp/ff0000/00000/100x100.png?text=test" >
19</div>
20</div>