【jQuery入门】用fadeIn()方法实现淡出淡入

这次我们来学习一下fadeIn()方法，它可以在淡入的同时显示 HTML 元素！

什么是fadeIn()

“fadeIn()”是一种允许 HTML 元素随着时间缓慢出现的方法。

一般用于在“下拉菜单”、“手风琴菜单”等中显示内容。

还可以添加一个叫做easing的动画效果。

本篇文章我们从“fadeIn()”的基础知识来学习它的应用！

如何使用fadeIn()

我们来看看“fadeIn()”的基本用法吧！

基本的语法和写法

首先，我们来看一下基本的语法吧！

一般来说，只需对想要动画的HTML元素执行“fadeIn（）”。

HTML标签.fadeIn( 时间（可选） );

如何淡入元素

接下来我们试着使用fadeIn()方法来一个实例。

准备以下HTML元素：

<h1 style="display: none">示例标题</h1>

虽然只是一个简单的h1标签，但这不是主要的，重点的是在CSS中指定了“display:none”。

因为“fadeIn()”只对隐藏的HTML元素起作用。

fadeIn()只有“慢慢显示…”的功能，所以需要事先隐藏。

然后在对这个h1标签执行fadeIn()方法就OK了！

$('h1').fadeIn();

通过上例写法，h1元素将从隐藏状态淡入并显示。

顺便说一下，也有在CSS中不隐藏而使用“hide()”实现淡入的方法。

$('h1').hide().fadeIn();

如果像这样在执行fadeIn()之前插入hide()，则无需事先隐藏HTML对象。

如何指定动画时间

“fadeIn()”如果直接运行的话动画效果会很快，所以一般是为参数设定时间。

时间参数为毫秒，只需要将数字直接指定为参数即可。

例如要在3秒钟内淡入显示，如下所示：

$('h1').fadeIn(3000);

在本示例中，将淡入显示h1标签。

“fadeIn(3000)”是指花3秒钟显示。

在fadeIn()中指定函数

“fadeIn()”也可以在参数中指定函数！

作为方法使用如【HTML标签.fadeIn（时间，函数）】所示，在第2参数中指定函数。

请看下面的示例：

$('h1').fadeIn(3000, function() {
  
  console.log('已淡入！');
  
});

在此示例中，h1元素将淡入3秒。

在第2参数中设定了函数，将字符串输出到控制台。

通过这样的写法，可以在fadeIn()处理完成后执行函数。

也就是说，在淡入显示后，字符串会输出到控制台。

如何实现事件处理

在使用“fadeIn()”时，通常与某些事件一起进行处理。

事件是指单击菜单后…或将鼠标光标重叠在指定位置后…进行的处理。

例如点击后，运行一下fadeIn()

$('button').click(function() {
  
  $('h1').fadeIn(3000);
  
});

此示例中鼠标单击button元素时执行fadeIn()处理，淡入会显示h1要素。

实现淡入淡出

接下来让我们来学习如何淡出以及如何重复淡入和淡出。

主要是学习如何使用“fadeOut()/fadeToggle()”方法。

如何使用“fadeOut()”淡出元素

首先让我们学习如何使用“fadeOut()”方法，它是“fadeIn()”的相反模式！

描述方法和用法和fadeIn()几乎一样，所以很容易使用。

请参阅下面的示例：

$('h1').fadeOut(3000);

在此示例中，h1元素隐藏（淡出）超过 3 秒。（参数时间可以省略）

可以看到它可以像fadeIn()一样使用。

当然，也可以通过将函数设置为参数来描述事件处理。

如何使用“fadeToggle()”重复显示/不显示

现在让我们看看一种可以轻松重复淡入淡出的方法！

它使用“fadeToggle()”方法，这也很方便，因为它的用法与fadeIn()几乎相同。

请参阅下面的示例：

$('button').click(function() {
 
        $('h1').fadeToggle();
 
})

在这个例子中，我们在click 事件处理中执行了fadeToggle() 。

这将导致h1元素在每次单击按钮时淡入和淡出。

因为只需编写一个fadeToggle()就可以了，所以也可以提高代码的效率。