jQuery に組み込まれたいくつかのアニメーションスタイル-jsチュートリアル-php.cn

jQuery に組み込まれたいくつかのアニメーションスタイル

小云云

リリース： 2018-01-06 09:08:33

オリジナル

1935 人が閲覧しました

JavaScript を使用してアニメーションを実装する原理は非常に簡単です。DOM 要素の CSS スタイルを毎回一定の時間間隔 (たとえば、0.1 秒) で少し変更するだけです (たとえば、高さと幅を増やすなど)。 10%)、アニメーションのように見えます。

しかし、JavaScript を使用してアニメーション効果を手動で実装するには、非常に複雑なコードを記述する必要があります。アニメーション効果を関数でカプセル化し、再利用しやすいようにしたい場合は、さらに考慮すべき点があります。この記事では主に、jQuery に組み込まれているいくつかのアニメーションスタイルを紹介します。

jQuery を使用してアニメーションを実装すると、コードはこれ以上に単純になります。必要なコードは 1 行だけです。

まず、いくつかの jQuery 組み込みアニメーションスタイルを見てみましょう:

show / Hide

パラメーターなしで show() と Hide() を直接呼び出すと、DOM 要素が表示および非表示になります。ただし、時間パラメーターが渡されている限り、アニメーションになります:

var p = $('#test-show-hide');
p.hide(3000); // 在3秒钟内逐渐消失

ログイン後にコピー

時間はミリ秒単位ですが、「slow」や「fast」などの文字列にすることもできます:

var p = $('#test-show-hide');
p.show('slow'); // 在0.6秒钟内逐渐显示

ログイン後にコピー

toggle() メソッドは現在の状態に基づいて、show() または Hide() のどちらを実行するかを決定します。

slideUp / slideDown

show() と hide() は左上隅から徐々に拡大または縮小し、slideUp() と slideDown() は垂直方向に徐々に拡大または縮小することに気づいたかもしれません。

slideUp() は表示されている DOM 要素を閉じます。その効果はカーテンを閉じるようなもので、slideDown() はその逆を行い、slideToggle() は要素が表示されているかどうかに基づいて次のアクションを決定します:

var p = $('#test-slide');
p.slideUp(3000); // 在3秒钟内逐渐向上消失

ログイン後にコピー

fadeIn / fadeOut

fadeIn() と fadeOut() のアニメーション効果はフェードインとフェードアウトで、これは DOM 要素の不透明度属性を継続的に設定することで実現されますが、 fadeToggle() は要素が表示されているかどうかに基づいて次のアクションを決定します。

カスタムアニメーション

上記のアニメーション効果が要件を満たせない場合は、最後の手段である animate() を使用します。これにより、任意のアニメーション効果を実現できます。渡す必要があるパラメーターは、DOM 要素の最終 CSS ステータスと時間です。 jQuery は、設定した値に達するまで継続的に CSS を調整します:

var p = $('#test-fade');
p.fadeOut('slow'); // 在0.6秒内淡出

ログイン後にコピー

animate() は、アニメーションの終了時に呼び出される関数を渡すこともできます:

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

ログイン後にコピー

関数パラメータは基本的なアニメーションにも使用されます。

animate() を使用すると、さまざまなカスタムアニメーション効果を実現できます:

animate()

シリアルアニメーション

jQuery のアニメーション効果はシリアルに実行することもでき、この例では、Delay() メソッド Pause を通じて実現することもできます。このように、より複雑なアニメーション効果を実現でき、コードは非常に単純です:

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000, function () {
  console.log('动画已结束');
  // 恢复至初始状态:
  $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

ログイン後にコピー

アニメーションは一定期間実行する必要があるため、jQuery は後続の操作を実行するために新しい Promise オブジェクトを継続的に返す必要があります。アニメーションを関数にカプセル化するだけでは十分ではありません。

一部のアニメーションが効果がない理由

slideUp() などの一部のアニメーションがまったく効果がない場合があります。これは、jQuery アニメーションの原理が、高さが 100px から 0 まで徐々に変化するなど、CSS の値を徐々に変更することであるためです。ただし、ブロックではない多くの DOM 要素では、高さを設定してもまったく効果がないため、アニメーションには影響がありません。

さらに、jQuery は背景色のアニメーション効果を実装していないため、animate() で背景色を設定しても効果はありません。この場合、CSS3 トランジションを使用してアニメーション効果を実現できます。