jQuery ?? ????? ??
1. ?? ????? ?? ??
?? ????? ??? ?? ??, ???, ?? ? ??? ?????. ?? ????? ?? ??? ????? ????? ??? ??? ?? ??? ???? ????. ??:
$("#divPop").show();
$("#divPop").hide();
$("#divPop").toggle();?? 2?? ????? ????. ?? ??? ??? ? ???? ?? ???? ??? ??? ????? ?? ??? ? ??? ??? ????? ??? ?? ??/?????. ????? ??? ??:
$("#divPop").show(200);
$("#divPop").hide("fast");
$("#divPop").toggle("slow");200? ??? ???? 200??? ??? ??????? ????? ?????. ?? ????? ?? ??? ? ?? ??("slow", "normal") ? ??? ???? ??? ? ????. ", ?? "fast") ?? ?????? ?????. ??? ??? ?(?: 1000)???.
? ?? ?? ?? ?? ?? ??? ??? ? ??? ??? ??? ????.
function callback() { this; // dom element}? ??? ?? ??? ? ??? ???? DOM ?????. ?????? ??? ?????.
2. ?? ?? ??
?? ??? ??? ?? ??? ??? ? ?? ? ??? ?????. ?? ?? ???? ???? ?? ??? ?? ?????. ???? ?? ???? ??? ???? ? ?? ???? ?? ???? ?????.
??: ??() ???? jQuery 1.8?? ? ?? ???? ?? ??? ?????? jQuery 1.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(); //設(shè)置彈出層位置
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> 
