jQuery ?????? ?? ?? ??
jQuery Animation
???? ??? ???? ???? ???? ???? ? ? ????? ?? ? ?? ???? ???? ?? ??? ?? ????. ??? ?? ?? ??? ??? ?????.
?? "???? ???? ??? ??"? ???? ?? ??? ?? ???? ?????. ? ???? ?? ???? ???? ?? ???? ?????.
??? ?? ????. ? ??? ?? ??????? ???? ?????. ??? ?? ??? ????.
1. ?? ???? ???? ??? ???? ?? ??? ??? ? ???? ?? ???? ??? ?????? ???? ???.
2. ??? ??? ????? ?? ?? ???? ?? ?????. ??? ??? ?? ??? ???? ??? ??? ? ????.
3. ??? ?? ??? ???? ? ?? ???? ??? ???? ???? ???. ??? ??? ?? ???? ??? ? ?? ????. ? ??? ?? ??? ? ????.
<!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(); //設(shè)置彈出層位置
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?? ??? ?? ?????. jQuery? ????? ??? ?? ? ?? ??? ????. ?? ????? ??: ??? ?????? ???? ??? ?? ????. ?? ????? ???? ????? ?? ?????. ???? ????? ??: ???? ? ????? ????? ??? ?????. ??? ????? ??? ?????. ? ? ?? ??? ????? ?? ??? ?? ???? ????? ???? ?????. ?? ? ? ?? ??? ??? ??? ??? ?? ?? ?? ????. , jQuery? ??? ?? ????? ??? ???? ???? ????? ??? ?????.
? ?? ??? ?? ????? ??? ??? ?? ????? ??? ??? ??? ???? ????.
