htmlにアニメーションをつける

実現したいこと

クリックボタンをクリックした際に
カーテンが開くようなアニメーションをつけたい

発生している問題・エラーメッセージ

ボタンをクリックしても想定通りの挙動にならない

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <link rel="stylesheet" href="./12-1.css" />
7    <!-- jQueryを動かすために必要な物がここに必要 -->
8    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
9    <title>Document</title>
10  </head>
11  <body>
12    <div class="box">
13      <div class="left"></div>
14      <div class="right"></div>
15    </div>
16    <button class="click">クリック</button>
17    <script>
18    //  ここにjQueryを記入
19    $('click').on('click', function(){
20      $('#left').animate({
21          marginLeft:'0px'
22      });
23    });
24    </script>
25  </body>
26</html>

css
1html, body, div, span, applet, object, iframe,
2h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3a, abbr, acronym, address, big, cite, code,
4del, dfn, em, img, ins, kbd, q, s, samp,
5small, strike, strong, sub, sup, tt, var,
6b, u, i, center,
7dl, dt, dd, ol, ul, li,
8fieldset, form, label, legend,
9table, caption, tbody, tfoot, thead, tr, th, td,
10article, aside, canvas, details, embed, 
11figure, figcaption, footer, header, hgroup, 
12menu, nav, output, ruby, section, summary,
13time, mark, audio, video {
14	margin: 0;
15	padding: 0;
16	border: 0;
17	font-size: 100%;
18	font: inherit;
19	vertical-align: baseline;
20}
21/* HTML5 display-role reset for older browsers */
22article, aside, details, figcaption, figure, 
23footer, header, hgroup, menu, nav, section {
24	display: block;
25}
26body {
27	line-height: 1;
28}
29ol, ul {
30	list-style: none;
31}
32blockquote, q {
33	quotes: none;
34}
35blockquote:before, blockquote:after,
36q:before, q:after {
37	content: '';
38	content: none;
39}
40table {
41	border-collapse: collapse;
42	border-spacing: 0;
43}
44.box{
45    display: flex;
46    justify-content: space-between;
47}
48.left{
49    width: 50%;
50    height: 100vh;
51    background-color: red;
52    position: absolute;
53    left: 0;
54    transition: all 2s ease;
55}
56.left.action{
57    width: 0;
58    transition: all 2s ease;
59}
60.right{
61    width: 50%;
62    height: 100vh;
63    background-color: black;
64    position: absolute;
65    right: 0;
66    transition: all 2s ease;
67}
68.right.action{
69    width: 0;
70    transition: all 2s ease;
71}
72.click{
73    position: absolute;
74    top: 50%;
75    left: 50%;
76    transform: translate(-50%);
77}

試したこと

jqueryでのアニメーションのつけ方を
調べたがテキストの動かし方しか発見できず
cssの動かし方が分からなかった

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

実はCSSのみでも実装できますので、CSSのみとjQuery、両方の方法をご紹介します。

動作確認用サンプル：https://jsfiddle.net/azg0dctm/1/

CSSのみでの実装

チェックボックスの見た目をボタン風にする。
チェックボックスにチェックが入っているとき、カーテンの横幅を0にする → transform: scaleX(0);
- そのとき、左のカーテンは左上を変形の基点とする → transform-origin: 0 0;
- そのとき、右のカーテンは右上を変形の基点とする → transform-origin: 100% 0;

jQueryで実装

ボタンを押したら、is-openclassをつけ外しする。
スタイルの内容としては、CSSのみでの実装方法と同じ（transformによる横幅変形）

コード例

html
1<!-- CSSのみで実装するカーテン -->
2<div class="container">
3  <input type="checkbox" id="checkbox" class="btn__checkbox"><label for="checkbox" class="btn">ボタン風チェックボックス</label>
4  <div class="curtain curtain--left"></div>
5  <div class="curtain curtain--right"></div>
6</div>
7
8<!-- jQueryで実装するカーテン -->
9<div class="container">
10  <button type="button" id="button" class="btn">ボタン</button>
11  <div id="curtain-left" class="curtain curtain--left js-curtain"></div>
12  <div id="curtain-right" class="curtain curtain--right js-curtain"></div>
13</div>

css
1/*==================================================
2
3** リセットCSS
4==================================================*/
5*,
6*::before,
7*::after {
8  margin: 0;
9  padding: 0;
10  box-sizing: border-box;
11}
12
13body {
14  padding: 1em;
15  font-family: sans-serif;
16}
17
18/*==================================================
19
20** 共通スタイル
21==================================================*/
22.container {
23  display: flex;
24  justify-content: center;
25  align-items: center;
26  width: 80%;
27  max-width: 600px;
28  aspect-ratio: 2 / 1;
29  position: relative;
30  margin: 0 auto 2em;
31  background-color: #eee;
32}
33
34.btn {
35  display: block;
36  margin: 0.4em auto 0;
37  padding: 0.5em 1em;
38  appearance: none;
39  color: white;
40  background-color: orange;
41  border: none;
42  border-radius: 0.3em;
43  font-size: 1em;
44  cursor: pointer;
45  z-index: 1;
46}
47
48.curtain {
49  width: 50%;
50  height: 100%;
51  position: absolute;
52  transform: scale(1);
53  transition: transform 0.5s ease-out;
54}
55
56.curtain--left {
57  left: 0;
58  background-color: red;
59  
60  /* 変形の基点を左上に設定 */
61  transform-origin: 0 0;
62}
63
64.curtain--right {
65  right: 0;
66  background-color: black;
67  
68  /* 変形の基点を右上に設定 */
69  transform-origin: 100% 0;
70}
71
72/*==================================================
73
74** CSSのみで実装するカーテン用スタイル
75==================================================*/
76/* チェックボックスの✅マークは不要なので非表示 */
77.btn__checkbox {
78  display: none;
79}
80
81/* チェックボックスにチェックが入っている状態のときのスタイル */
82.btn__checkbox:checked ~ .curtain {
83  transform: scaleX(0);
84}
85
86/*==================================================
87
88** jQueryで実装するカーテン用スタイル
89==================================================*/
90/* jQueryでつけはずしするclass */
91.curtain.is-open {
92  transform: scaleX(0);
93}

javascript
1jQuery(function($) {
2  // ボタンを押すたびに、左右のカーテンにclassをつけはずし
3  $('#button').on('click', function() {
4    $('.js-curtain').toggleClass('is-open');
5  })
6});

.animate()関数を使う場合

質問者様がご提示してくださっているコードをそのまま利用し、.animate()関数を使いたいのであれば、transformが使えないのでleft rightにマイナス値を渡して、画面からはみでて見えなくなる形になります。

動作確認用サンプル：https://jsfiddle.net/mvy9ukzd/

css
1body {
2  line-height: 1;
3  overflow-x: hidden; /* 追加 */
4}
5
6/* 中略 */
7
8.left {
9  width: 50%;
10  height: 100vh;
11  background-color: red;
12  position: absolute;
13  left: 0;
14  /* transition削除 */
15  /* transition: all 2s ease; */
16}
17
18/* 中略 */
19
20.right {
21  width: 50%;
22  height: 100vh;
23  background-color: black;
24  position: absolute;
25  right: 0;
26  /* transition削除 */
27  /* transition: all 2s ease; */
28}

javascript
1$('.click').on('click', function() { // ドットつける
2  $('.left').animate({ // html的にシャープじゃなくてドットでは？
3    left: -1 * $('.left').width(), // left要素の横幅分マイナスpx
4  }, 500);
5  $('.right').animate({ // html的にシャープじゃなくてドットでは？
6    right: -1 * $('.right').width(), // right要素の横幅分マイナスpx
7  }, 500);
8});

以下、コメント蘭での追加のご質問に回答します。

jQueryのセレクタについて

主に.と♯の違いはなんなんですか？

ドット.とシャープ#の違いですが、CSSセレクタと同じです。

$('.class-name')：クラス名
$('#id-name')：id名

質問者様のhtmlコードを見るとidをつけていないにも関わらず、jQueryで$('#left')と書いてidがleftの要素を取得してこようとしています。
そのようなものはコードの中にないので何も取得できず、jQueryが正常に動きません。

また、$('click')と書いていらっしゃいますが、ドットもシャープも書いていないので、そもそも文法ミスです。
ドットもシャープも書かないのは、タグ名で取得することになります。
例えば、<body>タグは$('body')で取得できます。

ドットもシャープもない$('click')とは、<click>タグという存在しないタグを指してしまいます。

.animate()関数の詳細

javascript
1要素.animate({プロパティ名: 値}, アニメーション時間ミリ秒, イージングの種類);

cssにtransitionを書かなくても、jQueryでtransitionをさせられます。
{プロパティ名: 値}だけ必須で、あとはかかなくても大丈夫で、書かなかった場合デフォルト値が渡されます。

例）

javascript
1$('div').animate({ // <div>タグ全部に対して、
2  color: 'white', // 文字色を白色に
3  backgroundColor: 'blue' // 背景を青色に
4}, 500, 'easein'); // 0.5秒かけて、easein

また、今回左カーテンの場合、left要素の幅px分、左にマイナスで移動させてやりたいのですが、要素の幅はレスポンシブであるため固定幅ではないから、{left: '-300px'}のように書くことができません。
そこで要素の幅を取得してきて、その幅をleftの値として代入しています。
要素の幅は要素.width()で取得することができます。
しかしこれだとプラスの値（例えば300px）であるため、マイナスの値にするために-1をかけています。
結果、以下のようになります。

javascript
1-1 * $('.left').width(), // -1 × left要素の横幅

おすすめの順番

今回のカーテンの様な動きは、.animate()関数を使うメリットがあまりないと私は思っています。
私見ですが、おすすめの順番とその理由を以下に記します。

１）CSSのみで実装

最も処理が速い
エラーで動かないというリスクが一番低い

２）jQueryでclassのつけ外し

jQueryのコードがシンプル
transformが使える（アニメーションがスムーズ）

３）jQueryで.animate()メソッド

コードが複雑
transformが使えない（animate関数はtransform非対応のため）

投稿2022/10/19 13:18

編集2022/10/20 12:33

Cocode

総合スコア2314

taki.muramatsu

2022/10/19 15:26

動作しましたありがとうございますただjsの部分が全然理解できなかったです

Cocode

2022/10/19 15:27

私のバージョンと、質問者様のバージョン、2種類のJS書きましたが、どちらがわからなかったですか？

taki.muramatsu

2022/10/19 15:51

後述の方です

taki.muramatsu

2022/10/19 15:53

主に.と♯の違いはなんなんですか？

Cocode

2022/10/19 18:44

回答を更新しました。

taki.muramatsu

2022/10/25 02:10

動作を繰り返したりする場合はどうなるんですか？例えばもう一度クリックでカーテンが閉じるみたいな感じです

Cocode

2022/10/25 02:18 編集

.animate()関数でそれをするとさらにコードが複雑化します。例えば、クリックした時に「is-open」classをつけ外しして、classがついている時は閉じる動作を、ついてない時には開く動作をするようifで分岐させます。

taki.muramatsu

2022/10/25 15:52

if文をしようとのことですが何を真として比べるのでしょうか

Cocode

2022/10/25 16:03

classがついている時が真で、ついてない時が偽になります。要素が特定のクラスをもっているかどうかの判断も、jQueryなら簡単にできます。この質問の投稿内容のテーマとは離れているので、この件の詳しい回答はこちらでは差し控えさせていただきます。ある要素が、特定のclassを持っていたら「クラスあり！」持っていなかったら「クラスなし！」とconsole.log()で表示するような簡単なコードから練習してみてはいかがでしょうか。ご自身で調べて書いてみて分かりませんでしたら、新規で質問を投稿していただければ私もお答えできますし、他の方も回答くださると思います〜！学習がんばってください✨

行動規範の内容に同意します