ホバー時に表示 ホバーを解除したら非表示にする レイアウトを組みたい(動き付き)

Question

実現したいこと

ホバー時にdisplay:none/blockを切り替えて要素を表示/非表示にしたいです。
js欄に記載したコードで実現したのですが、動きがカクカクになってしまうので動きをつけたいです。
(よくQ&Aのレイアウトであるような動きです。)

opacityなどを使う方法もあるようですが、自分で調べても実現には至りませんでした。

様々な方法があると思いますが、最初はdisplay:noneを保ちたいです。
ホバーによって、表示された要素分の高さが追加(伸びる)されるようなレイアウトを実現させたいです。

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

記載するべきjsコードがわからない。

該当のソースコード

<div class="question-container">
 
  <div class="question-box">
    <p class="question-box_query">好きな色は？</p>
    <p class="question-box_answer">赤色</p>
  </div>

  <div class="question-box">
    <p class="question-box_query">好きな果物は？</p>
    <p class="question-box_answer">りんご</p>
  </div>

  <div class="question-box">
    <p class="question-box_query">出身は？</p>
    <p class="question-box_answer">日本</p>
  </div>

</div>

$(document).ready(function() {
	$('.question-box').hover(
			function() {
					$(this).find('.question-box_answer').css('display', 'block');
			}, 
			function() {
					$(this).find('.question-box_answer').css('display', 'none');
			}
	);
});

試したこと・調べたこと

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

上記の詳細・結果

調べて実行しましたが実現できませんでした。

補足

特になし

Comments

[Lhankor_Mhy]

解決おめでとうございます！
お手数ですが、以下を参照して質問を解決済みにしてください。
https://teratail.com/help#resolve-question

Answer 1

「アコーディオン」と呼ばれるものをアニメーション付きで実装されたいのだと仮定してお答えいたします。

---

$(document).ready(function() {

  // 初期状態
  $('.question-box_answer').hide();

  // slideDown/slideUpのオプション
  const slideOptions = {
    duration: 300,
    easing: "linear", // デフォルトはswing
  };

  // hoverイベント
  $('.question-box').hover(
    function() {
      $(this).find('.question-box_answer').slideDown(slideOptions);
    },
    function() {
      $(this).find('.question-box_answer').slideUp(slideOptions);
    }
  );
});

回答へのコメントを受けて修正しました。

「easing」の指定によって、アニメーションが始まってから終わるまでの間の変化具合を調整できます。

slideDown(slideUp)はデフォルトではswingです。
回答ではlinearを指定して、直線的な動きになるようにしました。

jQueryに限らずですが、使用するメソッドのドキュメントをご覧になって、どのようなことができるかを確認してみることをオススメします。

この「easing」はCSSのアニメーションでもよく使用するので、種類ごとにどのような挙動をするのかを知っておいても良いかもしれませんね。

---

• slideDown
• slideUp
• イージング関数チートシート

Comments

[KAI]

ご回答ありがとうございます。
動きはついたのですが、動きの感覚が、開く時/閉じる時それぞれ最後だけ動きが早くなってしまうようになっています。
(体感的なだけ恐らく動作時間が代わっているわけではないと思うのですが、後半動作が間に合っていないような状態です、途中まで一定間隔で動作し、その後一気に要素が表示されます。)

対応方法わかればご教授いただきたいです。
宜しくお願い致します。

[kitaizumi506]

回答を修正しましたのでご確認ください。

[KAI]

ご回答ありがとうございます。

お陰様で解決いたしました。

Answer 2

その程度なら簡単なCSSでいけるのでは？

<style>
.question-box_query:not(:hover) + .question-box_answer{
display:none;
}
</style>
<div class="question-container">
 
  <div class="question-box">
    <p class="question-box_query">好きな色は？</p>
    <p class="question-box_answer">赤色</p>
  </div>

  <div class="question-box">
    <p class="question-box_query">好きな果物は？</p>
    <p class="question-box_answer">りんご</p>
  </div>

  <div class="question-box">
    <p class="question-box_query">出身は？</p>
    <p class="question-box_answer">日本</p>
  </div>
</div>

動きつき

<style>
.question-box_query:not(:hover) + .question-box_answer{
display:none;
}
.question-box_query{
  z-index:1;
}
.question-box_query:hover + .question-box_answer{
animation:slidedown 1s;
animation-fill-mode:forwards;
  z-index:2;
}
@keyframes slidedown{
  from{opacity:0;height:0;transform:translateY(-1em);}
  to  {opacity:1;height:2em;transform:translateY(0);}
}
</style>
<div class="question-container">
 
  <div class="question-box">
    <p class="question-box_query">好きな色は？</p>
    <p class="question-box_answer">赤色</p>
  </div>

  <div class="question-box">
    <p class="question-box_query">好きな果物は？</p>
    <p class="question-box_answer">りんご</p>
  </div>

  <div class="question-box">
    <p class="question-box_query">出身は？</p>
    <p class="question-box_answer">日本</p>
  </div>
</div>