CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

マスター jQuery animate():カスタム CSS アニメーションのクイック ガイド

jQuery animate() メソッドは、指定された CSS プロパティでカスタム アニメーションを実行します。多くの引数を受け入れます。最初の引数は、行われる CSS 変更を含むオブジェクトです。 2 番目の引数は、期間やコールバック関数などの複数のオプションを処理できます。 

animate() には多数のオプションが利用可能です 。この紹介は初心者向けの入門書に限定されます。 jQuery animate の構文とサンプル コードを見ていきます。このサンプル コードでは、animate() を使用して

を展開する方法を示します。 。 

jQuery animate() を使用する理由

jQuery animate() には多くのユースケースがあります 。簡単に言うと、アプリケーションのフロントエンドでアニメーションが必要なときはいつでもこのメソッドを使用できます。この方法は、動的で複雑なソリューションを提供します。 

アニメーションはフロントエンド開発における標準的な手法となっています。 animate() を使用する十分な練習があれば を使用すると、すぐにプロジェクトのフロントエンドにアニメーションを実装できるようになります。いくつかの構文を学習することから始めましょう。 

jQuery animate() 構文

簡単に説明したように、animate() CSS オブジェクトの引数を取ります。これは、選択した CSS プロパティの新しい値を含むオブジェクトです。ベスト プラクティスは、animate() のみを使用することです。 スタイルシートで参照される要素。 

すべての jQuery メソッドと同様、animate() 選択した要素にアタッチする必要があります。そこから、animate() を呼び出します。 そして、希望する最終的な外観の値を含む CSS プロパティのオブジェクトを渡します。ここで animate() に言及することが重要です。 CSS の数値プロパティでのみ機能します。色やフォント タイプなどの属性は、animate() によって読み取られません。 .

jQuery animate() の動作

ボタンと

の基本的な HTML レンダリングから始めて、上記の説明をよりわかりやすくコードに分解してみましょう。 

HTML
<button id="click">Click Me</button>
<div id="block">Watch Me!</div>

どちらの要素にも id 属性があります。これを jQuery で選択するために使用します。次に、animate() を使用できるように

をスタイル設定する方法を見てみましょう。 。 

CSS
 div {
 background-color: lightblue;
 width: 100px;
 border: 1px solid blue;
 }

ここでは、背景色、幅、小さな境界線を使用して

をスタイル設定しました。 jQuery を使用して
を選択する場合、animate() を渡すことができます。 CSS 属性のオブジェクト。これらの属性は、確認したい最終的な変更を反映します。  

$('#click').click(function() {
 $('#block').animate({
 width: '70%',
 fontSize: '3em',
 borderWidth: '10px'
 })
})

jQuery を分解すると、click の id 属性によってボタンが選択されていることがわかります。次に、jQuery click() を呼び出します。 クリックの受信を待機するイベント ハンドラーをアタッチするメソッド。一度 click() クリックイベントを受信すると、コールバック関数が実行されます。 

記憶を新たにしておくと、コールバック関数は、後で実行される別の関数に渡される関数です。この場合、クリック イベントが検出された後です。 jQuery click() について詳しく読む ここです。 

コールバック関数の内部に進み、

を選択します。ボタンと同じように、ブロックの id 属性を使用してボタンを選択します。ここで animate() を呼び出します。
上で CSS オブジェクトを渡します。 

fontSize と borderWidth が CSS での宣言方法とどのように異なるかに注目してください。これは、jQuery が通常ハイフンでつながれた CSS プロパティを受け入れる方法です。 

CSS オブジェクトの値は、アニメーションの完了後にレンダリングするものです。ここで、ボタンをクリックすると、

がアニメーション化されるのがわかります。 

マスター jQuery animate():カスタム CSS アニメーションのクイック ガイド

うまくいきました！

の内容がすべて一緒に展開され、新しい CSS 値に達することがわかります。 

結論

この初心者向け jQuery 入門書 animate() animate() であることがわかりました。 CSS オブジェクトでアニメーションを実行します。その CSS オブジェクトは、最終的な表示値とともにメソッドに渡されます。 animate() では CSS 数値値のみが読み取られることを繰り返します。 。背景色やフォントの種類などのプロパティは読み取られません。

jQuery animate() でカバーできる領域はさらにたくさんあります , したがって、この紹介が意味をなす場合は、ここをクリックしてください。公式ドキュメントをよく読んで、含まれている例を使って練習することを常にお勧めします。 jQuery animate() 最初は非常に複雑に思えるかもしれませんが、定期的に練習すれば、思ったよりも早くアニメーションをマスターできるようになります。 


  1. 実証済みのプロジェクトで CSS をマスター:雇用主に好印象を与えるポートフォリオを構築

    CSS は、最も人気のあるフロントエンド Web サイト開発テクノロジの 1 つです。現在、インターネット上のほぼすべての Web サイトは、カスケード スタイル シート (CSS) と HTML でスタイル設定されています。すでに CSS コードを学習している場合は、CSS プロジェクトの強力なポートフォリオを構築することで、仕事を得る可能性が高まります。  これらのプロジェクトは、あなたが Web 開発者またはプログラマーになるために必要な知識とスキルを持っていることを将来の雇用主に示します。この記事では、CSS を使用する際に習得するスキル、さまざまなレベルの経験に応じた CSS プロ

  2. CSSでセレクターをグループ化する

    CSSグループ化セレクターは、複数の要素を選択し、それらを一緒にスタイル設定するために使用されます。これにより、各要素に共通のスタイルを宣言するためのコードと余分な労力が削減されます。セレクターをグループ化するには、各セレクターをスペースで区切ります。 構文 CSSグループ化セレクターの構文は次のとおりです- element, element {    /*declarations*/ } 次の例は、CSSグループ化セレクター-を示しています。 例 <!DOCTYPE html> <html> <head> <style>