jQueryの基本的なアニメーション関數(shù)
1. 基本的なアニメーション関數(shù)を使用する
基本的なアニメーション関數(shù)は、主に表示、非表示、切り替えの 3 つのカテゴリに分かれており、アニメーションの切り替えがアニメーションの表示狀態(tài)に適用されないことを示しています。要素:
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();によって提供されます。コールバック関數(shù)は省略できるため、2 つのパラメーターでオーバーロードします。そのため、最初の例で使用したように、唯一のパラメーターとして値を渡すことができます。要素は、內部のアニメーション効果とともに表示/非表示になります。パラメーターで指定された時間:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");200 が渡された場合、レイヤーが 200 ミリ秒以內にグラデーションとして表示されることを意味します。speed パラメーターには、あらかじめ決められた 3 つの速度 (「slow」、「normal」) のいずれかの文字列を使用できます。 "、または "fast")、またはアニメーションを表します。持続時間のミリ秒値 (1000 など)。
3 つの関數(shù)はすべてコールバック関數(shù) callback で渡すことができます。署名は次のとおりです。
function callback() { this; // dom element}This in the callback 関數(shù)は、この関數(shù)を実行する DOM オブジェクトであり、アニメーションの終了時に実行されます。
2. トグル関數(shù)を使用します
トグル関數(shù)は、要素の表示狀態(tài)を切り替えることができる、より強力な関數(shù)です。たとえば、テキストを使用する必要がある狀況によく遭遇します。
注: toggle() メソッドは jQuery1.8 で廃止されたと宣言され、jQuery1.9 で削除されました。アニメーションにはトグルというメソッドもあります。どちらが呼び出されるかは、渡されたパラメータの設定によって異なります。
この効果を実現(xiàn)するために、冒頭の例を少し変更します:
<!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 }); //切換彈出層的顯示狀態(tài)
$("#divPop").toggle(speed);
}); //單擊空白區(qū)域隱藏彈出層
$(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> 
