teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コードの修正

2024/06/25 11:41

投稿

退会済みユーザー
answer CHANGED
@@ -2,44 +2,46 @@
2
2
 
3
3
  ---
4
4
 
5
- 1: 初期状態を作るために`.question-box_answer`を非表示にします。
6
-
7
5
  ```javascript
8
- $('.question-box_answer').hide();
6
+ $(document).ready(function() {
9
- ```
10
7
 
8
+ // 初期状態
9
+ $('.question-box_answer').hide();
10
+
11
- 2: [slideDown](https://api.jquery.com/slideDown/#slideDown-duration-complete)と[slideUp](https://api.jquery.com/slideUp/#slideUp-duration-complete)を使用したアニメーション処理を記述します。
11
+ // slideDown/slideUpのオプション
12
+ const slideOptions = {
12
- ```javascript
13
+ duration: 300,
14
+ easing: "linear", // デフォルトはswing
15
+ };
16
+
17
+ // hoverイベント
13
- $('.question-box').hover(
18
+ $('.question-box').hover(
14
- function() {
19
+ function() {
15
- $(this).find('.question-box_answer').slideDown(300);
20
+ $(this).find('.question-box_answer').slideDown(slideOptions);
16
- },
21
+ },
17
- function() {
22
+ function() {
18
- $(this).find('.question-box_answer').slideUp(300);
23
+ $(this).find('.question-box_answer').slideUp(slideOptions);
19
- }
24
+ }
20
- );
25
+ );
26
+ });
27
+
21
28
  ```
22
29
 
30
+ 回答へのコメントを受けて修正しました。
23
31
 
24
- 全体のコード
25
- ```javascript
26
- $(document).ready(function() {
32
+ 「easing」の指定によって、アニメーションが始まってから終わるまでの間の変化具合を調整できます。
27
33
 
28
- $('.question-box_answer').hide();
34
+ slideDown(slideUp)はデフォルトでは`swing`です。
35
+ 回答では`linear`を指定して、直線的な動きになるようにしました。
29
36
 
30
- $('.question-box').hover(
31
- function() {
32
- $(this).find('.question-box_answer').slideDown(300);
37
+ jQueryに限らずですが、使用するメソッドのドキュメントをご覧になって、どのようなことができるかを確認してみることをオススメします。
33
- },
34
- function() {
35
- $(this).find('.question-box_answer').slideUp(300);
36
- }
37
- );
38
- });
39
38
 
40
- ```
39
+ この「easing」はCSSのアニメーションでもよく使用するので、種類ごとにどのような挙動をするのかを知っておいても良いかもしれませんね。
41
40
 
42
- 以上がjQueryを使用した場合の回答です。
41
+ ---
43
42
 
43
+ - [slideDown](https://api.jquery.com/slideDown/#slideDown-duration-complete)
44
+ - [slideUp](https://api.jquery.com/slideUp/#slideUp-duration-complete)
44
- ご質問の意図に沿った回答になっていますでしょうか?
45
+ - [イージング関数チートシート](https://easings.net/ja)
45
- ご確認をお願いします。
46
+
47
+