jQuery アニメーションについての予備的な理解
jQuery アニメーション
Web プログラムを作成する場合、テキストやボタンをクリックしてプロンプト テキストを表示するなど、ポップアップ レイヤーを使用することが必要になることがよくあります。次の要件があるとします。
畫像の「プロンプトテキストを表示」ボタンをクリックすると、ボタンの下にポップアップレイヤーが表示されます?？瞻最I域またはポップアップレイヤーをクリックすると、ポップアップレイヤーが消えます。
また、完了することもできますこれはオリジナルの JavaScript で動作します。次の點に注意してください: 
1. ポップアップ イベントをトリガーするオブジェクトはページ上のどこにでも表示される可能性があるため、ポップアップ レイヤーの位置は動的に計算される必要があります。スクリーンショット內の位置など
2. クリックをドキュメントにバインドする関數は、複數のブロードキャスト デリゲートを使用する必要があります。そうしないと、他の関數がバインドされている可能性があります。
3. close 関數をドキュメントにバインドした後、display 関數でイベントのバブリングをキャンセルする必要があります。そうしないと、ポップアップ レイヤーが表示された直後に閉じられます。
この例は簡単に実裝できます:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>jQuery - Start Animation</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{ //動畫速度
var speed = 500; //綁定事件處理
$("#btnShow").click(function(event)
{ //取消事件冒泡
event.stopPropagation(); //設置彈出層位置
var offset = $(event.target).offset();
$("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //動畫顯示
$("#divPop").show(speed);
}); //單擊空白區(qū)域隱藏彈出層
$(document).click(function(event) { $("#divPop").hide(speed) }); //單擊彈出層則自身隱藏
$("#divPop").click(function(event) { $("#divPop").hide(speed) });
}); </script></head><body>
<div>
<br /><br /><br />
<button id="btnShow">顯示提示文字</button>
</div>
<!-- 彈出層 -->
<div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
width: 300px; height: 100px;">
<div style="text-align: center;">彈出層</div>
</div>
</body>
</html> 基本的な表示機能と非表示機能の実裝に加えて、ポップアップ レイヤーの表示と非表示がグラデーション アニメーション効果になりました。jQuery のアニメーション関數はとてもシンプルです。プロジェクトで使ってみて意外だったのですが、以前はブラウザ間で位置を計算するのに苦労していましたが、jQueryのoffset()関數とheight()関數を使うことでポップアップレイヤーの位置を正確に計算できるようになりました。これらの関數はカプセル化されており、ブラウザ間で使用できます。ポップアップ レイヤーの位置屬性を設定するときに「px」を追加することに注意する必要があります。そうしないと、FireFox でのアニメーション関數は主に 3 つのカテゴリに分類されます。 基本的なアニメーション機能: 透明度グラデーションとスライド効果の両方を備えており、最も一般的に使用されるアニメーション効果機能です。スライド グラデーション効果のみを使用します。: 透明度グラデーション効果のみを使用します。 これら 3 種類のアニメーション関數の効果はすべて異なりますが、使い方は基本的に同じです。ご自身で試してみてください。次に、jQuery はカスタム アニメーション関數も提供しており、獨自のアニメーション効果を定義できます
3 種類の組み込みアニメーション関數とカスタム アニメーション関數については、以下で個別に説明します。
