15. jQuery 的渐隐渐显动画

jQuery 的渐隐渐显动画 ( 参考一下13即可 )

通过操作 元素的 opacity 达到效果

 opacity 是Css的透明度属性啊

 

1. faseIn()　　//显示到指定透明度
+ opacity 0 ~ 1
2. fadeOut()　　//隐藏到指定透明度
+ opacity 1 ~ 0
3. fadeToggle()　　//切换
+ 切换

 

上面的语法都如下：

方法.(时间, 运动曲线, 回调函数)

 

4. fadeTo()
+ 运动到指定透明度
+ 语法: fadeTo(时间, 指定透明度, 运动曲线, 回调函数)

值得注意的是  fadeTo这个方法指定透明度后 他无论是 显/隐 还是 切换 以后都是透明度x 的了，因为呢 我也不知道.

例： ....自己试试即可：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jqsourse.js"></script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
        }
        input{
            margin-top: 10px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<input class="show" type="button" value="显示">
<input class="hide" type="button" value="隐藏">
<input class="toggle" type="button" value="切换">
<input class="fadeTo" type="button" value="切换到指定透明度">
<div></div>

<script>

    $('.show').click(()=>{
        $('div').fadeIn(1000,'linear',()=>{
            console.log("显示div");
        })
    });

    $('.hide').click(()=>{
        $('div').fadeOut(1000,'linear',()=>{
            console.log("隐藏div");
        })
    });

    $('.toggle').click(()=>{
        $('div').fadeToggle(1000,'linear',()=>{
            console.log("切换div");
        })
    });

    $('.fadeTo').click(()=>{
        $('div').fadeTo(1000,0.5,'linear',()=>{
            console.log("切换到指定透明度");
        })
    });

</script>
</body>
</html>

 

posted @ 2021-05-26 21:03  咸瑜  阅读(170)  评论(0)  编辑  收藏  举报