1. 基本的なアニメーション関数を使用する
基本的なアニメーション関数は、主に表示、非表示、切り替えの 3 つのカテゴリに分かれており、アニメーションの切り替えがアニメーションの表示状態に適用されないことを示しています。要素:
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle(); によって提供されます。コールバック関数は省略できるため、2 つのパラメーターでオーバーロードします。そのため、最初の例で使用したように、唯一のパラメーターとして値を渡すことができます。要素は、内部のアニメーション効果とともに表示/非表示になります。パラメーターで指定された時間:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow"); 200 が渡された場合、レイヤーが 200 ミリ秒以内にグラデーションとして表示されることを意味します。speed パラメーターには、あらかじめ決められた 3 つの速度 (「slow」、「normal」) のいずれかの文字列を使用できます。 "、または "fast")、またはアニメーションを表します。持続時間のミリ秒値 (1000 など)。
3 つの関数はすべてコールバック関数 callback で渡すことができます。署名は次のとおりです。
function callback() { this; // dom element}This in the callback 関数は、この関数を実行する DOM オブジェクトであり、アニメーションの終了時に実行されます。
2. トグル関数を使用します
トグル関数は、要素の表示状態を切り替えることができる、より強力な関数です。たとえば、テキストを使用する必要がある状況によく遭遇します。
注: toggle() メソッドは jQuery1.8 で廃止されたと宣言され、jQuery1.9 で削除されました。アニメーションにはトグルというメソッドもあります。どちらが呼び出されるかは、渡されたパラメータの設定によって異なります。
この効果を実現するために、冒頭の例を少し変更します:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery - Start Animation</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(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").toggle(speed);
}); //单击空白区域隐藏弹出层
$(document).click(function(event) {
$("#divPop").hide(speed)
}); //单击弹出层则自身隐藏
$("#divPop").click(function(event) {
$("#divPop").hide(speed)
});
}); </script></head><body>
<div>
<button id="btnShow">Display the text prompt</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;">pop div</div>
</div>
</body>
</html>次のセクション