1. Hide() と show() の表示と非表示
アニメーションの場合、表示と非表示は最も基本的な効果の 1 つです。このセクションでは、jQuery の表示と非表示について簡単に紹介します。
ボタンをクリックして効果を確認します
2. show()、hide()、および toggle() メソッドを使用します
前の例では、show() メソッドと Hide() メソッドを簡単に紹介しました。実際、これら 2 つのメソッドは、表示および非表示のプロセスを制御するパラメーターを受け入れることができます。
構文は次のとおりです
show(duration,[callback]);
Hide(期間,[コールバック]);
アニメーション効果に関して、jQuery は、fadeIn() と fadeOut という 2 つの実用的なメソッドも提供します。これらのアニメーション効果はフェーディングに似ており、その構文は、slow() および hide() とまったく同じです。
fadeIn(duration, [callback]);
例
コードをコピー
">
fadeTo() メソッドの使用法。
fadeTo() メソッドは、選択した要素の不透明度を指定された値に徐々に変更します。例:
速度 オプション。要素が現在の透明度から指定した透明度に変化する速度を指定します。
可能な値:
「遅い」
「普通」
「速い」
不透明度が必要です。フェードインまたはフェードアウトする透明度を指定します。 0.00 ~ 1.00 の数値である必要があります。
コールバック
オプション。 fadeTo関数実行後に実行される関数。
コールバックの詳細については、jQuery コールバックの章をご覧ください。
3. スライドの slideUp および slideDown エフェクト
前にアニメーション エフェクトについて説明しましたが、jQuery では、PPT 内の幻灯片のスロット エフェクトに似た switchUp() と slideDown() も提供されており、slow() や Hide() と完全に同じです。
上記のコードは div と img を定義し、add メソッドを使用して組み合わせます。 4.自定义アニメーション画フレームの汎用性とコード ファイルのサイズを考慮して、jQuery はすべてのアニメーション効果を網羅することはできませんが、公開者が独自にアニメーションを設定できるようにする animate() メソッドを提供しています。 2 つの形式および用途。
animate() メソッドは、公開者にとって非常に広い範囲に存在します。どちらも 2 つの形式に共通しています。最初の形式がよく使用されます。使用方法は次のとおりです。
animate(params,[duration],[イージング],[callback])
この中のparamsは、幻の実行を希望するcssプロパティのリストと、変更を希望する最終値であり、durationは選択可能であり、show()/hide()のパラメータと完全に同じ内容が含まれます。 jQuery では、リニアとスイングの 2 つの値のみが提供されます。コールバックは、アニメーションの完了後に実行されます。 注意が必要です。params 内の値は、cyclecamel 命名方式に従います。たとえば、paddingLeft は、padding-left を書き込むことはできません。また、params は、css で使用される数値で表示されるプロパティのみです。たとえば、width.top.opacity など。
背景色このようなプロパティはアニメーションではサポートされていません。
复制代码
では、jQuery は params で「=」または「-=」を使用して相対的な変化を表すこともできます。
まず div で完全な位置を設定し、animate() 内の -= と = を使用してそれぞれ相対左移動と相対右移動を実行します。
animate() メソッドには、以下に示すような別の形式もあります:animate(params,options)
ここで、params は最初の形式と完全に同じで、オプションはアニメーションの選択可能なパラメータ列表であり、主にduration、esaing、callback、queueなどが含まれます。その中でduration.easing.callbackは最初の形式と完全に一致し、queueは布尔值で表示されます。複数の animate() が jQuery に含まれている場合、現在の animate() は次の animate() を受け取り、これは按顺序実行(true) であり、同時に接触 false
上の 2 つの div ブロックは同時に 3 つのアニメーション エフェクトを使用しており、最初の div の最初のアニメーションには queue:false パラメータが追加されており、前の 2 つのアニメーションが同時に実行されるようになります。 ,熟すべてanimate()の第二の形式。
以上が本書のすべての内容です。