首页 > 其他分享> > jQuery 淡入淡出效果

jQuery 淡入淡出效果

2021-09-25 19:00:47 作者：互联网

淡入已隐藏的元素

语法
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>

标签：jQuery,function,淡入,效果,淡入淡出,color,height,time,淡出
来源： https://blog.csdn.net/m0_46813809/article/details/120475601