【jQuery入门】如何用fadeOut()实现HTML淡出

这一次我们来学习一下“fadeOut()”，它可以在从 jQuery 中淡出的同时隐藏 HTML 元素！

什么是fadeOut()

首先我们了解一下“fadeOut()”的基本知识！“fadeOut()” 是一种可以在动画HTML元素时隐藏的方法。

作为标准用法，关闭“下拉菜单”等时会逐渐隐藏。

如何使用fadeOut()

首先我们看一下基本语法！基本上，您只需在要淡出的元素上调用 fadeOut()。

HTML标签.fadeOut(时间(毫秒))

“时间”可以设置为参数，单位是毫秒。它的另一个特点是即使有多个目标元素也以相同的方式操作。

如何淡出 HTML 元素

接下来我们看看使用“fadeOut()”的实际应用！例如有这样的 HTML：

<h1>示例标题</h1>

这个例子只有一个简单的 h1 元素。所以让我们淡出这个 h1 元素！

$('h1').fadeOut();

只需像这样在 h1 元素上运行“fadeOut()”。屏幕上显示的 h1 元素会自动被赋予一个逐渐消失的动画。

如何通过指定秒数（毫秒）来实现淡出

现在让我们将时间设置为“fadeOut()”的参数！

例如将时间设置为“2 秒”，则表示动画将缓慢执行，直到 2 秒过去。因此，让我们在前面的示例中添加时间！

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

在本例中参数设置为“2000”，因此动画需要 2 秒。不要忘记以毫秒为单位设置时间！

为“fadeOut()”指定一个函数

“fadeOut()”也可以将函数设置为参数！作为描述方法，将函数指定为第二个参数，如[HTML element.fadeOut (time, function)] 。

请参阅下面的示例：

$('h1').fadeOut(2000, function() {
 
    console.log('淡出！');
 
});

在此示例中h1元素在2秒内淡出。一个函数被设置为第二个参数，并且描述了将字符串输出到控制台的过程。