回答編集履歴
6
typo
test
CHANGED
@@ -137,7 +137,7 @@
|
|
137
137
|
---
|
138
138
|
|
139
139
|
### .animate()関数を使う場合
|
140
|
-
質問者様がご提示してくださっているコードをそのまま利用し、`.anim
|
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
|
-
### .anim
|
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で.anim
|
240
|
+
**3)jQueryで.animate()メソッド**
|
241
241
|
- コードが複雑
|
242
|
-
- `transform`が使えない(anim
|
242
|
+
- `transform`が使えない(animate関数はtransform非対応のため)
|
5
らんきんぐ
test
CHANGED
@@ -139,7 +139,7 @@
|
|
139
139
|
### .animate()関数を使う場合
|
140
140
|
質問者様がご提示してくださっているコードをそのまま利用し、`.animete()`関数を使いたいのであれば、`transform`が使えないので`left` `right`にマイナス値を渡して、画面からはみでて見えなくなる形になります。
|
141
141
|
|
142
|
-
- 動作確認用サンプル:https://jsfiddle.net/m
|
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
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
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
|
-
$('
|
132
|
+
$('.js-curtain').toggleClass('is-open');
|
133
|
-
$('#curtain-right').toggleClass('is-open');
|
134
133
|
})
|
135
134
|
});
|
136
135
|
```
|
2
animete関数
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
微調整
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
|
-
|
130
|
+
// ボタンを押すたびに、左右のカーテンにclassをつけはずし
|
131
|
-
|
131
|
+
$('#button').on('click', function() {
|
132
|
-
|
132
|
+
$('#curtain-left').toggleClass('is-open');
|
133
133
|
$('#curtain-right').toggleClass('is-open');
|
134
134
|
})
|
135
135
|
});
|