jQueryでのアニメーション-jsチュートリアル-php.cn

jQueryでのアニメーション

炎欲天舞

リリース： 2017-08-04 15:26:28

オリジナル

1099 人が閲覧しました

1.show() メソッドと Hide() メソッド

は、これら 3 つの属性の値が 100 になるまで、コンテンツの 高さ、幅、不透明度 を変更しながら、要素の表示状態 (表示と非表示) を制御します。 % または 0 (表示: なし)。 CSS での表示と同等: block/inline/none;

注: アニメーション効果に jQuery を使用するには標準モードが必要です。そうでない場合、アニメーションのジッターが発生する可能性があります。標準モードでは、ファイルヘッダーに次の DTD 定義が含まれている必要があります:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://wslideww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

ログイン後にコピー

パラメータ: fast--200ms、normal--400ms、slow--600ms、パラメータが数値でない場合は引用符を追加します。パラメータが数値の場合は追加しないでください。

(1) fadeIn() メソッドと fadeOut() メソッド

要素の不透明度のみを変更します - 要素が完全に消えるまで透明度を上げ、透明度を下げます (表示: なし)

(2) slideUp() メソッドと slideDown () メソッド

は要素の高さのみを変更します - 折りたたみと展開

2.animate() メソッド - カスタムアニメーション

left 属性: この属性は 位置決め要素 left を定義しますマージンの端とそのブロックを含むブロックの左端の間のオフセット。

注: 「position」属性の値が「static」の場合、「left」属性を設定しても効果はありません。

形式: animate(params,speed,callback)

(1) 最初のパラメータ params: スタイル属性と値を含むマッピング、例: {property: "value1"、property: "value1"。。。。 }

(2) 2番目のパラメーターspeed:スピードパラメーター

(3) 3番目のパラメーターcallback:コールバック関数、アニメーションが完了したときに実行されるアクション

補足: ①属性の値を加算および減算し、アニメーション化することができます( {left: "+= 500px"})

② 複数のアニメーションを同時に実行するには異なる属性を設定するか、順番にコードを逆アセンブルする ③Nimate()メソッド連鎖書き込みメソッドで複数の操作を実現

3.関数

アニメーションキュー: アニメーション効果は順番に実行されます

注: アニメーションキューに追加できるのはアニメーションメソッドのみです。アニメーション以外のメソッドはアニメーションキューに追加されませんが、すぐに実行されます。アニメーション以外のメソッドは追加できます。アニメーション化されていないメソッドをコールバック関数に記述することでキューに入れられます。

以上がjQueryでのアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。