特效入门

jQueryjQueryBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

欢迎来到 jQuery 文档!本实验将向你介绍特效。

jQuery 让你能够轻松地为页面添加简单特效。特效可以使用内置设置,也可以提供自定义的持续时间。你还可以创建任意 CSS 属性的自定义动画。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("`jQuery`")) -.-> jquery/EventHandlingGroup(["`Event Handling`"]) jquery(("`jQuery`")) -.-> jquery/UserInterfaceInteractionGroup(["`User Interface Interaction`"]) jquery/EventHandlingGroup -.-> jquery/event_effects("`Event Effects`") jquery/UserInterfaceInteractionGroup -.-> jquery/ui_effects("`UI Effects`") subgraph Lab Skills jquery/event_effects -.-> lab-153791{{"`特效入门`"}} jquery/ui_effects -.-> lab-153791{{"`特效入门`"}} end

显示和隐藏内容

VM 中已提供 index.html

jQuery 可以使用 .show().hide() 瞬间显示或隐藏内容:

// 瞬间隐藏所有段落
$("p").hide();

// 瞬间显示所有具有 hidden 样式类的 div
$("div.hidden").show();

当 jQuery 隐藏一个元素时,它会将其 CSS display 属性设置为 none。这意味着内容将具有零宽度和高度;这并不意味着内容会简单地变得透明并在页面上留下一个空白区域。

jQuery 还可以通过动画效果显示或隐藏内容。你可以通过几种方式告诉 .show().hide() 使用动画。一种方法是传入 'slow''normal''fast' 作为参数:

// 缓慢隐藏所有段落
$("p").hide("slow");

// 快速显示所有具有 hidden 样式类的 div
$("div.hidden").show("fast");

如果你希望对动画效果的持续时间有更直接的控制,可以将所需的持续时间(以毫秒为单位)传递给 .show().hide()

// 在半秒内隐藏所有段落
$("p").hide(2000);

// 在 1.25 秒内显示所有具有 hidden 样式类的 div
$("div.hidden").show(1250);

大多数开发者会传入毫秒数来更精确地控制持续时间。

请点击右下角的“上线”以在端口 8080 上运行 Web 服务。然后,你可以刷新“Web 8080”标签页来预览网页。

根据当前可见状态更改显示

jQuery 还能让你根据内容当前的可见状态来更改其可见性。.toggle() 会显示当前隐藏的内容,并隐藏当前可见的内容。你可以向 .toggle() 传递与上述任何特效方法相同的参数。

// 瞬间切换所有段落的显示状态
$("p").toggle();

// 在 1.8 秒内切换所有 div 的显示状态
$("div").toggle(1800);

.toggle() 将使用滑动和淡入淡出效果的组合,就像 .show().hide() 一样。

你可以刷新“Web 8080”标签页来预览网页。

动画完成后执行某些操作

在实现 jQuery 特效时,一个常见的错误是认为链式调用中的下一个方法会等到动画运行完成后才执行。

$("div.hidden").fadeIn(1500).addClass("lookAtMe");

需要注意的是,上面的 .fadeIn() 只是启动了动画。一旦启动,动画是通过在 JavaScript 的 setInterval() 循环中快速更改 CSS 属性来实现的。当你调用 .fadeIn() 时,它启动动画循环,然后返回 jQuery 对象,并将其传递给 .addClass(),这样在动画循环刚刚开始时就会添加 lookAtMe 样式类。

要将一个操作推迟到动画运行完成之后执行,你需要使用动画回调函数。你可以将动画回调函数作为第二个参数传递给上述任何一个动画方法。对于上面的代码片段,我们可以如下实现回调:

// 淡入所有隐藏的段落;然后给它们添加一个样式类(使用动画回调函数修正)
$("div.hidden").fadeIn(1500, function () {
  // this = 刚刚完成动画的 DOM 元素
  $(this).addClass("lookAtMe");
});

请注意,你可以使用关键字 this 来引用正在进行动画的 DOM 元素。还要注意,回调函数会为 jQuery 对象中的每个元素调用。这意味着如果你的选择器没有返回任何元素,你的动画回调函数将永远不会运行!你可以通过测试你的选择是否返回了任何元素来解决这个问题;如果没有,你可以直接立即运行回调函数。

// 即使没有元素需要动画处理,也运行回调函数
var someElement = $("#nonexistent");

var cb = function () {
  console.log("完成!");
};

if (someElement.length) {
  someElement.fadeIn(300, cb);
} else {
  cb();
}

你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你!你已经完成了特效入门实验。要了解有关 jQuery API 的更多信息,请参阅官方的 jQuery 文档。

您可能感兴趣的其他 jQuery 教程