[解決済み] jqueryを使用してscale cssプロパティをアニメーション化するにはどうすればよいですか?
2022-02-25 10:06:17
質問
jQueryを使って、ボタンがクリックされたときに、"bubble"というクラスを持つ円形のdivが飛び出すようにしようとしているのです。私はそれが何もないところから表示され、その完全なサイズに成長するようにしたいのですが、私はそれが動作するようにするのに苦労しています。
HTML バブルを表示する ... CSS
.bubble {
transform: scale(0);
}
ジャバスクリプト
$('button').click(function(){
$('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
});
解決方法は?
CSSで遷移を行い、アニメーションを開始するためのクラスを追加する「スイッチ」としてJavascriptを使用すればよいのです。これを試してみてください。
$('button').click(function() {
$('.bubble').toggleClass('animate');
})
.bubble {
transform: scale(0);
width: 250px;
height: 250px;
border-radius: 50%;
background-color: #C00;
transition: all 5s;
}
.bubble.animate {
transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Toggle</button>
<div class='col-lg-2 col-md-2 well bubble'></div>
関連
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】このオブジェクトの "forEach "はなぜ関数でないのですか?
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】TypeError: AngularJSで未定義のプロパティ'get'を読み取れない