質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

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

taki.muramatsu
taki.muramatsu

総合スコア7

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

436閲覧

投稿2022/10/19 11:54

編集2022/10/19 13:05

実現したいこと

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

イメージ説明

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

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

該当のソースコード

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/ツールのバージョンなど)

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/10/19 12:40依頼された後にこの質問は修正されています

こちらの質問が複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

回答1

0

ベストアンサー

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

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にマイナス値を渡して、画面からはみでて見えなくなる形になります。

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()関数を使うメリットがあまりないと私は思っています。
私見ですが、おすすめの順番とその理由を以下に記します。

1)CSSのみで実装

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

2)jQueryでclassのつけ外し

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

3)jQueryで.animate()メソッド

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

投稿2022/10/19 13:18

編集2022/10/20 12:33
Cocode

総合スコア2231

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

taki.muramatsu

2022/10/19 15:26

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

2022/10/19 15:27

私のバージョンと、質問者様のバージョン、2種類のJS書きましたが、どちらがわからなかったですか?
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()で表示するような簡単なコードから練習してみてはいかがでしょうか。 ご自身で調べて書いてみて分かりませんでしたら、新規で質問を投稿していただければ私もお答えできますし、他の方も回答くださると思います〜! 学習がんばってください✨

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。