jQuery 淡入淡出效果

最新推荐文章于 2022-05-23 08:27:28 发布

「已注销」

最新推荐文章于 2022-05-23 08:27:28 发布

阅读量211

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/m0_46813809/article/details/120475601

版权

淡入已隐藏的元素

语法
fadeIn(time,function);

time 淡入的速度
function 淡入完后执行的函数

<style>
    div {
        display: none;
        width: 500px;
        height: 300px;
        background-color: red;
    }
</style>

<body>
    <button id="i">淡入</button>
    <div id="ll">这个盒子将被淡入</div>
    <script>
        $(function() {
            $("#i ").click(function() {
                $('#ll').fadeIn(1000);
            })

        })
    </script>
</body>

淡出可显示的元素

语法
fadeOut(time，function)；

<style>
    div {
        width: 500px;
        height: 300px;
        background-color: red;
    }
</style>

<body>
    <button id="i">淡出</button>
    <div id="ll">这个盒子将被淡出</div>
    <script>
        $(function() {
            $("#i ").click(function() {
                $('#ll').fadeOut(1000)
            })

        })
    </script>
</body>

淡入与淡出的结合

语法
fadeToggle(time，function);

<style>
    div {
        width: 500px;
        height: 300px;
        background-color: red;
    }
</style>

<body>
    <button id="i">淡入和淡出</button>
    <div id="ll">这个盒子将被淡入和淡出</div>
    <script>
        $(function() {
            $("#i ").click(function() {
                $('#ll').fadeToggle(1000)
            })

        })
    </script>
</body>