回答編集履歴

6

typo

2022/10/20 12:33

投稿

Cocode
Cocode

スコア2316

test CHANGED
@@ -137,7 +137,7 @@
137
137
  ---
138
138
 
139
139
  ### .animate()関数を使う場合
140
- 質問者様がご提示してくださっているコードをそのまま利用し、`.animete()`関数を使いたいのであれば、`transform`が使えないので`left` `right`にマイナス値を渡して、画面からはみでて見えなくなる形になります。
140
+ 質問者様がご提示してくださっているコードをそのまま利用し、`.animate()`関数を使いたいのであれば、`transform`が使えないので`left` `right`にマイナス値を渡して、画面からはみでて見えなくなる形になります。
141
141
 
142
142
  - 動作確認用サンプル:https://jsfiddle.net/mvy9ukzd/
143
143
 
@@ -201,7 +201,7 @@
201
201
 
202
202
  ドットもシャープもない`$('click')`とは、`<click>`タグという存在しないタグを指してしまいます。
203
203
 
204
- ### .animete()関数の詳細
204
+ ### .animate()関数の詳細
205
205
  ```javascript
206
206
  要素.animate({プロパティ名: 値}, アニメーション時間ミリ秒, イージングの種類);
207
207
  ```
@@ -237,6 +237,6 @@
237
237
  - jQueryのコードがシンプル
238
238
  - `transform`が使える(アニメーションがスムーズ)
239
239
 
240
- **3)jQueryで.animete()メソッド**
240
+ **3)jQueryで.animate()メソッド**
241
241
  - コードが複雑
242
- - `transform`が使えない(animete関数はtransform非対応のため)
242
+ - `transform`が使えない(animate関数はtransform非対応のため)

5

らんきんぐ

2022/10/19 19:00

投稿

Cocode
Cocode

スコア2316

test CHANGED
@@ -139,7 +139,7 @@
139
139
  ### .animate()関数を使う場合
140
140
  質問者様がご提示してくださっているコードをそのまま利用し、`.animete()`関数を使いたいのであれば、`transform`が使えないので`left` `right`にマイナス値を渡して、画面からはみでて見えなくなる形になります。
141
141
 
142
- - 動作確認用サンプル:https://jsfiddle.net/mogLeyst/
142
+ - 動作確認用サンプル:https://jsfiddle.net/mvy9ukzd/
143
143
 
144
144
  ```css
145
145
  body {
@@ -225,4 +225,18 @@
225
225
  ```javascript
226
226
  -1 * $('.left').width(), // -1 × left要素の横幅
227
227
  ```
228
-
228
+ ### おすすめの順番
229
+ 今回のカーテンの様な動きは、`.animate()`関数を使うメリットがあまりないと私は思っています。
230
+ 私見ですが、おすすめの順番とその理由を以下に記します。
231
+
232
+ **1)CSSのみで実装**
233
+ - 最も処理が速い
234
+ - エラーで動かないというリスクが一番低い
235
+
236
+ **2)jQueryでclassのつけ外し**
237
+ - jQueryのコードがシンプル
238
+ - `transform`が使える(アニメーションがスムーズ)
239
+
240
+ **3)jQueryで.animete()メソッド**
241
+ - コードが複雑
242
+ - `transform`が使えない(animete関数はtransform非対応のため)

4

details

2022/10/19 18:44

投稿

Cocode
Cocode

スコア2316

test CHANGED
@@ -136,6 +136,7 @@
136
136
 
137
137
  ---
138
138
 
139
+ ### .animate()関数を使う場合
139
140
  質問者様がご提示してくださっているコードをそのまま利用し、`.animete()`関数を使いたいのであれば、`transform`が使えないので`left` `right`にマイナス値を渡して、画面からはみでて見えなくなる形になります。
140
141
 
141
142
  - 動作確認用サンプル:https://jsfiddle.net/mogLeyst/
@@ -144,6 +145,30 @@
144
145
  body {
145
146
  line-height: 1;
146
147
  overflow-x: hidden; /* 追加 */
148
+ }
149
+
150
+ /* 中略 */
151
+
152
+ .left {
153
+ width: 50%;
154
+ height: 100vh;
155
+ background-color: red;
156
+ position: absolute;
157
+ left: 0;
158
+ /* transition削除 */
159
+ /* transition: all 2s ease; */
160
+ }
161
+
162
+ /* 中略 */
163
+
164
+ .right {
165
+ width: 50%;
166
+ height: 100vh;
167
+ background-color: black;
168
+ position: absolute;
169
+ right: 0;
170
+ /* transition削除 */
171
+ /* transition: all 2s ease; */
147
172
  }
148
173
  ```
149
174
  ```javascript
@@ -156,3 +181,48 @@
156
181
  }, 500);
157
182
  });
158
183
  ```
184
+ 以下、コメント蘭での追加のご質問に回答します。
185
+
186
+ ---
187
+
188
+ ### jQueryのセレクタについて
189
+ > 主に.と♯の違いはなんなんですか?
190
+
191
+ ドット`.`とシャープ`#`の違いですが、CSSセレクタと同じです。
192
+ - `$('.class-name')`:クラス名
193
+ - `$('#id-name')`:id名
194
+
195
+ 質問者様のhtmlコードを見るとidをつけていないにも関わらず、jQueryで`$('#left')`と書いてidがleftの要素を取得してこようとしています。
196
+ そのようなものはコードの中にないので何も取得できず、jQueryが正常に動きません。
197
+
198
+ また、`$('click')`と書いていらっしゃいますが、ドットもシャープも書いていないので、そもそも文法ミスです。
199
+ ドットもシャープも書かないのは、タグ名で取得することになります。
200
+ 例えば、`<body>`タグは`$('body')`で取得できます。
201
+
202
+ ドットもシャープもない`$('click')`とは、`<click>`タグという存在しないタグを指してしまいます。
203
+
204
+ ### .animete()関数の詳細
205
+ ```javascript
206
+ 要素.animate({プロパティ名: 値}, アニメーション時間ミリ秒, イージングの種類);
207
+ ```
208
+ cssに`transition`を書かなくても、jQueryでtransitionをさせられます。
209
+ `{プロパティ名: 値}`だけ必須で、あとはかかなくても大丈夫で、書かなかった場合デフォルト値が渡されます。
210
+
211
+ 例)
212
+ ```javascript
213
+ $('div').animate({ // <div>タグ全部に対して、
214
+ color: 'white', // 文字色を白色に
215
+ backgroundColor: 'blue' // 背景を青色に
216
+ }, 500, 'easein'); // 0.5秒かけて、easein
217
+ ```
218
+
219
+ また、今回左カーテンの場合、left要素の幅px分、左にマイナスで移動させてやりたいのですが、要素の幅はレスポンシブであるため固定幅ではないから、`{left: '-300px'}`のように書くことができません。
220
+ そこで要素の幅を取得してきて、その幅をleftの値として代入しています。
221
+ 要素の幅は`要素.width()`で取得することができます。
222
+ しかしこれだとプラスの値(例えば`300px`)であるため、マイナスの値にするために-1をかけています。
223
+ 結果、以下のようになります。
224
+
225
+ ```javascript
226
+ -1 * $('.left').width(), // -1 × left要素の横幅
227
+ ```
228
+

3

js-curtain

2022/10/19 14:00

投稿

Cocode
Cocode

スコア2316

test CHANGED
@@ -1,6 +1,6 @@
1
1
  実はCSSのみでも実装できますので、CSSのみとjQuery、両方の方法をご紹介します。
2
2
 
3
- - 動作確認用サンプル:https://jsfiddle.net/azg0dctm/
3
+ - 動作確認用サンプル:https://jsfiddle.net/azg0dctm/1/
4
4
 
5
5
  ### CSSのみでの実装
6
6
  - チェックボックスの見た目をボタン風にする。
@@ -24,8 +24,8 @@
24
24
  <!-- jQueryで実装するカーテン -->
25
25
  <div class="container">
26
26
  <button type="button" id="button" class="btn">ボタン</button>
27
- <div id="curtain-left" class="curtain curtain--left"></div>
27
+ <div id="curtain-left" class="curtain curtain--left js-curtain"></div>
28
- <div id="curtain-right" class="curtain curtain--right"></div>
28
+ <div id="curtain-right" class="curtain curtain--right js-curtain"></div>
29
29
  </div>
30
30
  ```
31
31
 
@@ -120,7 +120,7 @@
120
120
  ** jQueryで実装するカーテン用スタイル
121
121
  ==================================================*/
122
122
  /* jQueryでつけはずしするclass */
123
- .is-open {
123
+ .curtain.is-open {
124
124
  transform: scaleX(0);
125
125
  }
126
126
  ```
@@ -129,8 +129,7 @@
129
129
  jQuery(function($) {
130
130
  // ボタンを押すたびに、左右のカーテンにclassをつけはずし
131
131
  $('#button').on('click', function() {
132
- $('#curtain-left').toggleClass('is-open');
132
+ $('.js-curtain').toggleClass('is-open');
133
- $('#curtain-right').toggleClass('is-open');
134
133
  })
135
134
  });
136
135
  ```

2

animete関数

2022/10/19 13:52

投稿

Cocode
Cocode

スコア2316

test CHANGED
@@ -134,3 +134,26 @@
134
134
  })
135
135
  });
136
136
  ```
137
+
138
+ ---
139
+
140
+ 質問者様がご提示してくださっているコードをそのまま利用し、`.animete()`関数を使いたいのであれば、`transform`が使えないので`left` `right`にマイナス値を渡して、画面からはみでて見えなくなる形になります。
141
+
142
+ - 動作確認用サンプル:https://jsfiddle.net/mogLeyst/
143
+
144
+ ```css
145
+ body {
146
+ line-height: 1;
147
+ overflow-x: hidden; /* 追加 */
148
+ }
149
+ ```
150
+ ```javascript
151
+ $('.click').on('click', function() { // ドットつける
152
+ $('.left').animate({ // html的にシャープじゃなくてドットでは?
153
+ left: -1 * $('.left').width(), // left要素の横幅分マイナスpx
154
+ }, 500);
155
+ $('.right').animate({ // html的にシャープじゃなくてドットでは?
156
+ right: -1 * $('.right').width(), // right要素の横幅分マイナスpx
157
+ }, 500);
158
+ });
159
+ ```

1

微調整

2022/10/19 13:20

投稿

Cocode
Cocode

スコア2316

test CHANGED
@@ -89,7 +89,7 @@
89
89
  left: 0;
90
90
  background-color: red;
91
91
 
92
- /* 変形の点を左上に設定 */
92
+ /* 変形の点を左上に設定 */
93
93
  transform-origin: 0 0;
94
94
  }
95
95
 
@@ -97,7 +97,7 @@
97
97
  right: 0;
98
98
  background-color: black;
99
99
 
100
- /* 変形の点を右上に設定 */
100
+ /* 変形の点を右上に設定 */
101
101
  transform-origin: 100% 0;
102
102
  }
103
103
 
@@ -127,9 +127,9 @@
127
127
 
128
128
  ```javascript
129
129
  jQuery(function($) {
130
- // ボタンを押すたびに、左右のカーテンにclassをつけはずし
130
+ // ボタンを押すたびに、左右のカーテンにclassをつけはずし
131
- $('#button').on('click', function() {
131
+ $('#button').on('click', function() {
132
- $('#curtain-left').toggleClass('is-open');
132
+ $('#curtain-left').toggleClass('is-open');
133
133
  $('#curtain-right').toggleClass('is-open');
134
134
  })
135
135
  });