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 是内建的速度常量

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();
}

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

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

アニメーションスタイル

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