jQuery 效果 - 淡入淡出

最新推荐文章于 2024-05-06 00:37:37 发布

Southern Wind

最新推荐文章于 2024-05-06 00:37:37 发布

阅读量369

点赞数 3

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/nanchen_J/article/details/120066205

版权

jQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

效果附上：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fadein()方法</title>
    <style>
        //下面的例子演示了带有不同参数的 fadeIn() 方法：
        div{
            width: 100px;
            height: 100px;
            display: none;
            text-align: center;
        }
        #div1{
            background-color: green;
        }
        #div2{
            background-color: yellow;
        }
        #div3{
            background-color: red;
        }
    </style>
</head>
<body>
<script src="../jquery-3.6.0.js"></script>
    <button>按钮淡入p1</button>
    <div id="div1">green</div>
    <div id="div2">yellow</div>
    <div id="div3">red</div>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
               $('#div1').fadeIn(1000);
               $('#div2').fadeIn();
               $('#div3').fadeIn();
            })
        })
    </script>
    
</body>
</html>

jQuery fadein()方法

隐藏该元素。

语法：$(selector).fadeIn(speed,callback);

和之前的jQuery 效果-隐藏/显示的用法一致

jQuery 效果- 隐藏和显示_nanchen的博客-CSDN博客

注意：

fadeIn() 用于淡入已隐藏的元素。
语法:$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fadein()方法</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            display: none;
            text-align: center;
        }
        #div1{
            background-color: green;
        }
        #div2{
            background-color: yellow;
        }
        #div3{
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- fadeIn() 用于淡入已隐藏的元素。
语法:$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法： -->
<script src="../jquery-3.6.0.js"></script>
    <button>按钮淡入p1</button>
    <div id="div1">green</div>
    <div id="div2">yellow</div>
    <div id="div3">red</div>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
               $('#div1').fadeIn(1000);
               $('#div2').fadeIn();
               $('#div3').fadeIn();
            })
        })
    </script>
</body>
</html>

jQuery fadeOut() 方法

淡出

语法：$(selector).fadeOut(speed,callback);

代码就不演示了，直接引入淡出方法即可

效果如图：

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在前两种方法中进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：$(selector).fadeToggle(speed,callback);

其效果与第一张图片和第一张代码一致

jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:$(selector).fadeTo(speed,opacity,callback);

效果：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
        #div1 {
            background-color: blue;
        }
        #div2 {
            background-color: blue;
        }
        #div3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <button>调整盒子不透明度</button>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        // 语法$(selector).fadeTo(speed,opacity,callback);
        // 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
        $('button').click(function () {
            $('#div1').fadeTo('show', 0.1);   //透明度只能在0~1之间
            $('#div2').fadeTo('show', 0.4);
            $('#div3').fadeTo('show', 0.8);
        })
    </script>
</body>

</html>

总结：

一、fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。

二、fadeTo() 没有默认参数，必须加上 slow/fast/Time 。

Southern Wind

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery 效果 - 淡入淡出

效果附上：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫