Jquery示例三 --淡入淡出的动画函数

最新推荐文章于 2021-08-08 14:48:27 发布

ethan永不言弃

最新推荐文章于 2021-08-08 14:48:27 发布

阅读量2.1k

点赞数

文章标签： jquery button function div input border

本文链接：https://blog.csdn.net/Cai_Ethan/article/details/7306834

版权

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

$("#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按钮" />  <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 待续-----------------------------

ethan永不言弃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery示例三 --淡入淡出的动画函数

淡入淡出主要是提供透明度的$("#ID").fadeIn(5000) //主要是渐渐淡入效果。也是说让一个隐藏的控件渐渐地显示出来，和show差不多$("#ID").fadeOut(5000)//主要是渐渐淡出效果。也是说让一个显示的控件隐藏起来，和hide差不多，隐藏之后不占空间$("#ID").fadeTo(1,0.4)//主要是控制透明度，1为100%，0.4为40%。
复制链接

扫一扫