使用jQuery实现简单的淡入淡出

示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            height: 400px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
</body>
<script src="/js文件/jQuery.mini.js"></script>
<script type="text/javascript">
    $(function () {
        $("button").eq(0).click(function () {
            //淡入 fadeIn()
            $("div").fadeIn(100);
        })
        $("button").eq(1).click(function () {
            //淡出 fadeOut()
            $("div").fadeOut(100);
        })
        $("button").eq(2).click(function () {
            //淡入淡出切换 fadeToggle()
            $("div").fadeToggle(100);
        })
        $("button").eq(3).click(function () {
            //修改透明度 fadeTo() 速度和透明度一定要写
            $("div").fadeTo(100, 0.5);
        })
    })
</script>

</html>

 

posted @ 2022-04-18 10:38  今天穿秋裤了吗  阅读(86)  评论(0)    收藏  举报