JavaScript の jQuery ライブラリでアニメーション効果を記述するためのガイド_基本

jquery で一般的に使用されるアニメーション メソッドは、hide() と show() です。

$(element).hide() このコードは、この element.css("display","none") と同等です

Hide(time) と show(time) にイベントを記入すると、ゆっくりと消えたり現れたりします。要素の複数のスタイル、高さ、幅、不透明度を変更できます。

もう 1 つのメソッドのセット fadeIn() および fadeOut() は、hide または show を使用すると Web ページの高さは変更されますが、fadeIn および fadeOut は変更されないという点で、hide および show とは異なります。

$（ "＃パネルh5.head"）。トグル（function（）{$（this）.removeclass（ "highlight"）;。

アニメーション手法のまとめ

アニメーションキュー

(1) 一連の要素に対するアニメーション効果。

a) 1 つの animate() メソッドで複数のプロパティを適用すると、アニメーションが同時に発生します。

b) アニメーション メソッドが連鎖的に適用される場合、アニメーションは順番に発生します。

(2) 複数の要素グループに対するアニメーション効果

a) デフォルトでは、アニメーションはすべて同時に発生します。

b) アニメーション メソッドがコールバックの形式で適用される場合、アニメーションはコールバックの順序で発生します。

さらに、アニメーション メソッドでは、css() メソッドなどの他の非アニメーション メソッドもキューにジャンプすることに注意してください。これらの非アニメーション メソッドも順番に実行されるようにするには、これらのメソッドをアニメーションメソッドのコールバック関数。

animate の例を挙げてください:

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

アニメーションを停止したい場合は、animate() メソッドの前に stop() メソッド

を挿入する必要があります。

例: $("#id").stop().animate() stop の 2 つのパラメータに注意してください。

要素がアニメーション状態にあるかどうかを判断するメソッド:

$(element).is(“:animated”);

jQuery では、ページ上の要素に動的効果を簡単に追加できます。組み込みの効果を使用することも、独自の効果を定義することもできます。

組み込みのエフェクトメソッドをいくつか示します:

• $.fn.show 選択した要素を表示
• $.fn.hide 選択した要素を非表示にします
• $.fn.fadeIn フェードイン
• $.fn.fadeOut フェードアウト
• $.fn.slideDown は垂直方向のスライド効果を通じて要素を表示します
• $.fn.slideUp は垂直方向のチャイナ効果を通じて要素を非表示にします
• $.fn.slideToggle スライド インタラクションの実行を表示または非表示にします

簡単な例:

$('h1').show();

アニメーション効果の持続時間を設定します

$.fn.show と $.fn.hide のデフォルトの継続時間は 0 です。他のエフェクトのデフォルトの継続時間は通常 400 ミリ秒です。もちろん、継続時間を自分で設定することもできます。

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是内建的速度常量

jQuery のデフォルトの速度定数は、jQuery.fx.speeds オブジェクトにあります:

speeds: {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
}

このオブジェクトを拡張して、一般的に使用される独自の速度値を追加することもできます:

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

コールバック関数

アニメーション効果の終了後にコードを実行したい場合は、これらのアニメーション メソッドをコールバック関数に置き換えることができます。

$('div.old').fadeOut(300, function() {
 $(this).remove();
});

セレクター内で一致する要素がない場合、コールバック関数は実行されないため、コールバック関数を実行する前に判断する必要があります。

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

カスタムアニメーションメソッド

jQuery の $.fn.animate メソッドを使用してカスタム アニメーションを拡張できます。これは主に、animate メソッドを通じて要素の CSS プロパティを設定することによって実現されます。要素の CSS プロパティを設定する場合は、絶対値を使用できます。または相対値:

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 时长
  function() { console.log('done!'); // 回调函数
});

ただし、$.fn.animate を使用してカスタム アニメーション効果を作成する場合、要素の色は変更できません。カラー アニメーションを作成したい場合は、他のカラー プラグインを利用する必要があります。

アニメーションスタイル

jQuery には、スイングとリニアという 2 つの組み込みアニメーション スタイルがあります

$('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300
);

コントロールアニメーション

jQuery には、アニメーションの実行を制御するためのメソッドがいくつか用意されています。

$.fn.stop は現在実行中のアニメーションを停止します

$.fn.lay はアニメーションを一定期間一時停止します:

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off: アニメーションのトランジション効果をオフにします。これは、継続時間を 0 に設定するのと同じです。