編集履歴

回答編集履歴

typo

2022/10/20 12:33

投稿

スコア2316

answer CHANGED Viewed

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

らんきんぐ

2022/10/19 19:00

投稿

Cocode

スコア2316

answer CHANGED Viewed

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

details

2022/10/19 18:44

投稿

Cocode

スコア2316

answer CHANGED Viewed

@@ -136,6 +136,7 @@
 ---
+### .animate()関数を使う場合
 質問者様がご提示してくださっているコードをそのまま利用し、`.animete()`関数を使いたいのであれば、`transform`が使えないので`left` `right`にマイナス値を渡して、画面からはみでて見えなくなる形になります。
 - 動作確認用サンプル：https://jsfiddle.net/mogLeyst/
@@ -145,6 +146,30 @@
   line-height: 1;
   overflow-x: hidden; /* 追加 */
 }
+/* 中略 */
+.left {
+  width: 50%;
+  height: 100vh;
+  background-color: red;
+  position: absolute;
+  left: 0;
+  /* transition削除 */
+  /* transition: all 2s ease; */
+}
+/* 中略 */
+.right {
+  width: 50%;
+  height: 100vh;
+  background-color: black;
+  position: absolute;
+  right: 0;
+  /* transition削除 */
+  /* transition: all 2s ease; */
+}
 ```
 ```javascript
 $('.click').on('click', function() { // ドットつける
@@ -155,4 +180,48 @@
     right: -1 * $('.right').width(), // right要素の横幅分マイナスpx
   }, 500);
 });
-```
+```
+以下、コメント蘭での追加のご質問に回答します。
+---
+### jQueryのセレクタについて
+> 主に.と♯の違いはなんなんですか？
+ドット`.`とシャープ`#`の違いですが、CSSセレクタと同じです。
+- `$('.class-name')`：クラス名
+- `$('#id-name')`：id名
+質問者様のhtmlコードを見るとidをつけていないにも関わらず、jQueryで`$('#left')`と書いてidがleftの要素を取得してこようとしています。
+そのようなものはコードの中にないので何も取得できず、jQueryが正常に動きません。
+また、`$('click')`と書いていらっしゃいますが、ドットもシャープも書いていないので、そもそも文法ミスです。
+ドットもシャープも書かないのは、タグ名で取得することになります。
+例えば、`<body>`タグは`$('body')`で取得できます。
+ドットもシャープもない`$('click')`とは、`<click>`タグという存在しないタグを指してしまいます。
+### .animete()関数の詳細
+```javascript
+要素.animate({プロパティ名: 値}, アニメーション時間ミリ秒, イージングの種類);
+```
+cssに`transition`を書かなくても、jQueryでtransitionをさせられます。
+`{プロパティ名: 値}`だけ必須で、あとはかかなくても大丈夫で、書かなかった場合デフォルト値が渡されます。
+例）
+```javascript
+$('div').animate({ // <div>タグ全部に対して、
+  color: 'white', // 文字色を白色に
+  backgroundColor: 'blue' // 背景を青色に
+}, 500, 'easein'); // 0.5秒かけて、easein
+```
+また、今回左カーテンの場合、left要素の幅px分、左にマイナスで移動させてやりたいのですが、要素の幅はレスポンシブであるため固定幅ではないから、`{left: '-300px'}`のように書くことができません。
+そこで要素の幅を取得してきて、その幅をleftの値として代入しています。
+要素の幅は`要素.width()`で取得することができます。
+しかしこれだとプラスの値（例えば`300px`）であるため、マイナスの値にするために-1をかけています。
+結果、以下のようになります。
+```javascript
+-1 * $('.left').width(), // -1 × left要素の横幅
+```

js-curtain

2022/10/19 14:00

投稿

Cocode

スコア2316

answer CHANGED Viewed

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

animete関数

2022/10/19 13:52

投稿

Cocode

スコア2316

answer CHANGED Viewed

@@ -133,4 +133,27 @@
     $('#curtain-right').toggleClass('is-open');
   })
 });
+```
+---
+質問者様がご提示してくださっているコードをそのまま利用し、`.animete()`関数を使いたいのであれば、`transform`が使えないので`left` `right`にマイナス値を渡して、画面からはみでて見えなくなる形になります。
+- 動作確認用サンプル：https://jsfiddle.net/mogLeyst/
+```css
+body {
+  line-height: 1;
+  overflow-x: hidden; /* 追加 */
+}
+```
+```javascript
+$('.click').on('click', function() { // ドットつける
+  $('.left').animate({ // html的にシャープじゃなくてドットでは？
+    left: -1 * $('.left').width(), // left要素の横幅分マイナスpx
+  }, 500);
+  $('.right').animate({ // html的にシャープじゃなくてドットでは？
+    right: -1 * $('.right').width(), // right要素の横幅分マイナスpx
+  }, 500);
+});
 ```

微調整

2022/10/19 13:20

投稿

Cocode

スコア2316

answer CHANGED Viewed

@@ -89,7 +89,7 @@
   left: 0;
   background-color: red;
-  /* 変形の起点を左上に設定 */
+  /* 変形の基点を左上に設定 */
   transform-origin: 0 0;
 }
@@ -97,7 +97,7 @@
   right: 0;
   background-color: black;
-  /* 変形の起点を右上に設定 */
+  /* 変形の基点を右上に設定 */
   transform-origin: 100% 0;
 }
@@ -127,9 +127,9 @@
 ```javascript
 jQuery(function($) {
-	// ボタンを押すたびに、左右のカーテンにclassをつけはずし
+  // ボタンを押すたびに、左右のカーテンにclassをつけはずし
-	$('#button').on('click', function() {
+  $('#button').on('click', function() {
-  	$('#curtain-left').toggleClass('is-open');
+    $('#curtain-left').toggleClass('is-open');
     $('#curtain-right').toggleClass('is-open');
   })
 });