jQuery fadeIn()方法

下面是对jQuery fadeIn()方法的详细讲解：

1. 什么是jQuery fadeIn()方法？

jQuery中的fadeIn()方法可以添加一个淡入的效果来显示隐藏的DOM元素。

fadeIn()方法可以在给定时间（以毫秒为单位）中淡入所选元素到其完全不透明度。此方法在不改变布局（如visibility）的情况下不会显示元素。如果要在元素不可见时立即显示元素（无论其尺寸），可以使用jQuery的show()方法或css()方法。

2. jQuery fadeIn()方法的语法

$(selector).fadeIn(speed,easing,callback)

参数说明：

speed：可选参数。规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。默认值是 "normal"。
easing：可选参数。规定效果的类型。默认是 "swing"。
callback：可选参数。fadeOut() 方法完成后，要执行的函数名称。

3. 示例说明

示例1：基本用法

下面是一个简单的示例，它演示了如何在单击按钮时让一个元素淡入显示：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery fadeIn()方法示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        #demo {
            display: none;
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <button id="show">显示</button>
    <div id="demo">This is a demo</div>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#show").click(function(){
                $("#demo").fadeIn();
            });
        });
    </script>
</body>
</html>

我们在页面中加入了一个按钮和一个初始状态为隐藏的div元素。通过单击按钮，我们调用fadeIn()方法来添加淡入效果来显示div元素。

示例2：淡入显示图片

下面示例展示如何使用fadeIn()方法来淡入显示一张图片：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery fadeIn()方法示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        #demo img {
            display: none;
        }
    </style>
</head>
<body>
    <div id="demo">
        <img src="https://picsum.photos/200/300" />
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#demo img").fadeIn();
        });
    </script>
</body>
</html>

我们在页面中添加了一个div元素，并在该元素中嵌入了一张图片。我们使用CSS设置图片最初不可见（display: none），然后使用jQuery调用fadeIn()方法来添加淡入效果来显示它。在该示例中没有按钮，图片会在页面加载后立即淡入显示。

这就是对jQuery fadeIn()方法的完整介绍。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery fadeIn()方法 - Python技术站

1. 什么是jQuery fadeIn()方法？

2. jQuery fadeIn()方法的语法

3. 示例说明

示例1：基本用法

示例2：淡入显示图片

相关文章