Jquery示例 三 --淡入淡出的動畫函數

淡入淡出主要是提供透明度的

$("#ID").fadeIn(5000) //主要是漸漸淡入效果。也是說讓一個隱藏的控件漸漸地顯示出來,和show差不多

$("#ID").fadeOut(5000)//主要是漸漸淡出效果。也是說讓一個顯示的控件隱藏起來,和hide差不多,隱藏之後不佔空間

$("#ID").fadeTo(1,0.4)//主要是控制透明度,1爲100%,0.4爲40%。

 

------------------------------------------以下是示例代碼---------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <title>Jquery_Fade</title>
    <script type="text/javascript">
        $(function () {
            $("#Button1").click(function (event) { $("#div1").fadeIn(5000); });//讓div1層淡入顯示,5000是淡入淡出的速度,單位爲毫秒
            $("#Button2").click(function (event) { $("#div2").fadeOut(5000); })//讓div2層淡出隱藏
            $("#Button3").click(function (event) { if ($("#div1").css("display") == "none") { $("#div1").fadeIn(5000); } else { $("#div1").fadeOut(5000); } });//判斷狀態淡入淡出操作
            $("#Button4").fadeTo(1, 0.4);//設置按鈕的透明度
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Button3" type="button" value="fade按鈕" /> <input id="Button1" type="button" value="fedaIn按鈕" />
        <div id="div1" style="border:solid 1px blue; width:400px; height:200px; display:none;"><br />測試fedaIn按鈕</div>
        <input id="Button2" type="button" value="fedaOut按鈕" /> &nbsp;<input
            id="Button4" type="button" value="fedaTo按鈕" />
        <div id="div2" style="border:solid 1px red; width:400px; height:200px"><br />測試fedaOut按鈕</div>
    </div>
    </form>
</body>
</html>

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

---------------------------ehtan 待續-----------------------------

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