ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryイージングスイングライナーはアニメーションのさまざまな瞬間の速度を制御します process_jquery

jqueryイージングスイングライナーはアニメーションのさまざまな瞬間の速度を制御します process_jquery

WBOY
WBOYオリジナル
2016-05-16 16:46:251330ブラウズ

jQuery エフェクト関数 (slideUp()、fadeIn() など) と anime() 関数は両方とも、アニメーション プロセスの速度を制御するために使用される別のパラメーター (イージング) を受け取ります。これは、アニメーション プロセスの速度を異なる速度で決定します。瞬間。たとえば、ページ上で要素を移動するとき、要素の動きはゆっくりと始まり、その後非常に速くなり、最後にアニメーションが完了するにつれて再び遅くなることがあります。アニメーションにイージングを追加すると、アニメーションがより視覚的に面白くなり、ダイナミックになります。

jQuery には、スイングとリニアの 2 つのイージング メソッドのみが含まれています。線形手法では、アニメーションの各ステップが同じになるように安定したアニメーションが提供されます (たとえば、要素が徐々に変化する方法で画面上を移動する場合、各ステップは前のステップと同じ距離になります)。スイングはよりダイナミックになり、アニメーションの最初は速くなり、その後遅くなります。スイングは一般的な設定であるため、イージングが指定されていない場合、jQuery はスイング メソッドを使用します。

どの jQuery エフェクトでも、イージング メソッドは 2 番目のパラメータであるため、線形メソッドを使用して要素をスライドさせて表示から外すには、次のようなコードを記述できます。

コードをコピーします コードは次のとおりです。

$('#element').slideUp(1000,'linear'); 🎜>
animate() 関数を使用する場合、イージング メソッドは 3 番目のパラメーターであり、最初のパラメーターはアニメーション化する CSS プロパティを含みます。2 番目のパラメーターはアニメーション全体です。スピード。たとえば、アニメーション コードに線形イージング手法を使用するには、次のようなコードを記述します。

コードをコピー コードは次のとおりです:
$('#message').animate(
{
left: '650px',
opacity: .5,
fontSize: '24px'
},
1500,
'linear'
);

ただし、次の 2 つのイージング方法の使用に限定されるわけではありません。 jQuery。 jQuery プラグインを使用して、他のさまざまなイージング メソッドを追加できます。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。