博客

jQuery fadeIn()方法

  • Post category:jquery

jQuery fadeIn()方法详解

1. 什么是jQuery fadeIn()方法

jQuery fadeIn()方法用于渐进式地将元素淡入显示。它可以慢慢地将元素的不透明度增加，直到完全显示出来。

2. fadeIn()方法的语法格式

fadeIn()方法的语法格式如下：

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

参数说明：

  • selector：被选中的元素。
  • speed：淡入效果需要的时间，单位毫秒，默认值是400毫秒。
  • easing：控制淡入的速度模式，默认值是”swing”，可以取值”linear”。
  • callback：淡入效果执行完成后，要执行的函数名。

3. 用法示例1

下面是一个简单的使用jQuery的fadeIn()方法的例子。

HTML代码：

<div id="content" style="display: none;">
    <p>这是一个渐进式淡入效果的例子</p>
</div>
<button id="btn">显示内容</button>

JS代码：

$(document).ready(function(){
    $("#btn").click(function(){
        $("#content").fadeIn();
    });
});

上述代码表示，当点击按钮时，选择器$(“#content”)被选中的元素将会渐进式地显示出来。

4. 用法示例2

下面是另一个使用jQuery的fadeIn()方法的例子，这个例子可以在页面载入时渐进式地显示页面中的所有图片。

HTML代码：

<img src="image1.jpg" class="image">
<img src="image2.jpg" class="image">
<img src="image3.jpg" class="image">

JS代码：

$(document).ready(function(){
    $(".image").fadeIn(2000, "linear", function(){
        console.log("所有图片已经渐进式显示完成。");
    });
});

上述代码表示，当页面载入完成后，将会渐进式地显示所有class为”.image”的图片，该效果需要2000毫秒执行完成。渐进式的速度模式为”linear”，显示完成后将会在console中输出一条提示信息。

5. 总结

通过上述示例可以得出，jQuery的fadeIn()方法可以很方便地实现渐进式淡入元素之间的过渡。它可以实现复杂动画效果，代码简单易懂，适用于各种不同的需求。

Tags: