CSS3アニメーションのjQueryアニメーション実装例 はじめに_jquery

jQuery アニメーションは、要素の CSS スタイルをある状態から別の状態に変更することで機能します。 CSS プロパティ値は徐々に変化し、アニメーション効果を作成できます。アニメーション化できるのは数値のみです（例：「margin:30px」）。文字列値はアニメーション化できません（「background-color:red」など）。詳しい使用方法については、jQuery Effect - animate() メソッドと公式チュートリアルを参照してください。

CSS3 などの多くの効果は数値ではないため、animate() メソッドを通じて直接実装する方法はありません。 translation()、rotate()、scale()、skew()、matrix()、rotateX()、rotateY() などのメソッドの特徴の 1 つは、値が文字と混在していることです。そして数字。したがって、animate() メソッドを直接使用して値を動的に変更してアニメーション効果を実現することはできません。

JavaScript を使用して CSS3 アニメーションを独自に実装する場合、setInterval() メソッドを介してのみ実装できますが、実装はより複雑です。実際、animate() メソッドは setInterval() メソッドに基づいて動作しますが、アニメーションの速度を設定でき、定速か可変速度かを設定することもできます。 animate() メソッドの 2 番目の使用法には、アニメーションの各ステップで実行される関数を指定するステップ パラメーターがあります。要素に大きな影響を与えない CSS 値を使用して animate() メソッドをトリガーし、ステップ コールバック関数で変更したい値を変更することで、アニメーションを間接的に実装できます。変換例を参照してください:

コードをコピー コードは次のとおりです:

#box {
幅:100px;
位置:絶対;
左:100px;
テキストインデント: 90px;
背景色: red;

$('#box').animate({ textIndent: 0 }, {
ステップ: function (now,fx) {
$(this).css('-webkit-transform','rotate(' now 'deg)');
},
duration:'slow '
},'linear');


ここにはテキストがないため、text-indent 属性がアニメーションをトリガーするために使用されます。そのため、スタイル効果に影響を与えることなく text-indent が使用されます。要素の font-size なども使用できます。次に、animate() メソッドによって生成されたリズムを使用してアニメーションを実装します。類推すると、多くの効果が得られます。具体的な例については、こちらを参照してください。

リファレンス ドキュメント
•
jQuery エフェクト - animate() メソッド

•.animate()