Jquery 示例二 簡單動畫

 

 主要用到

$("#id").show();//顯示

$("#id").hide();//隱藏

$("#id").toggle();//狀態相反

========================示例代碼=============================

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery Start</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>//記得引用
    <script type="text/javascript">
        $(function () {
            var speed = 5000;//動畫設置時間,毫秒
            $("#btnShow").click(function (event) { //給btnShow按鈕綁定點擊事件
                event.stopPropagation(); //取消事件的冒泡
                //設置層的屬性
                var offSet = $(event.target).offset();
                $("#divPop").css({ top: offSet.top + $(event.target).height() + "px", left: offSet.left, width: "300px", height: "200px" });
                $("#divPop").show(speed); //divPop動態顯示
            });
            $("#divPop").click(function (event) { $(this).hide(speed);//動態隱藏 })
            $("#Button1").click(function (event) {
                event.stopPropagation();
                var offset1 = $(event.target).offset();
                $("#div1").css({ top: offset1.top + $(event.target).height() + "px", left: offset1.left, width: "300px", height: "200px" });
                $("#div1").toggle(speed);//動態切換,如果div1顯示着,則單擊按鈕Button1控件div1隱藏(hide()),否則相反show()顯示
            });
        });
   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style=" border: solid 1px red; margin-bottom: 0px;"><br />
    </div>
        <div id="divPop" style="background-color:#f0f0f0; border:solid 1px red; display:none; ">
    <div>這是顯示層</div>
    </div>
    <div>
    <br />
        <input id="btnShow" type="button" value="提示文字" />
    </div>
    <div><input id="Button1" type="button" value="切換Div層" /></div>
    <div id="div1" style="border:solid 1px blue; display:none; position:absolute; display:none;"></div>
    </form>
</body>
</html>

============有錯誤的地方,請多多指教==================

--------------------ethan 待續-----------------------

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章