jQuery 效果 - 淡入淡出

最新推荐文章于 2023-12-14 19:51:15 发布

Southern Wind

最新推荐文章于 2023-12-14 19:51:15 发布

阅读量430

点赞数 3

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

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

版权

jQuery 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文详细介绍了jQuery的fadeIn(), fadeOut(), fadeToggle()和fadeTo()方法，提供了代码示例和效果展示。fadeIn()用于淡入隐藏元素，fadeOut()实现淡出效果，fadeToggle()在淡入淡出间切换，fadeTo()则可调整元素到指定的不透明度。文章还包含了这些方法的参数解释和使用注意事项。

摘要由CSDN通过智能技术生成

效果附上：

代码如下：

<!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>