jQuery Academy · 课时

高级切换与滑动效果

掌握 .slideToggle()、.fadeToggle() 和 .animate() 的高级用法，创建平滑、响应迅速且美观的显示、隐藏和过渡效果。

第 3 / 3 课11 个步骤

高级切换与滑动效果 是 CoddyKit 上的免费 jQuery Academy 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

欢迎学习高级切换效果！

在本课中，我们将深入学习 jQuery 中用于创建动态显示/隐藏效果的强大方法。您将掌握 .slideToggle()、.fadeToggle()，以及如何使用 .animate() 创建自定义过渡效果。

这些技巧对于构建具有交互性且视觉效果出色的用户界面至关重要。

使用 slideToggle() 滑动元素

.slideToggle() 方法会为匹配元素的高度添加动画，使它们向上或向下滑动。如果元素可见，它会向上滑动并隐藏；如果元素处于隐藏状态，它会向下滑动并显示。

它非常适合用于可折叠菜单或展开式内容区域。请尝试运行此示例：

// HTML for context:
// <button id="toggleButton">Toggle Panel</button>
// <div id="myPanel" style="background-color: lightblue; padding: 10px;">
//   <p>This is a sliding panel!</p>
// </div>

$(document).ready(function() {
  $("#toggleButton").click(function() {
    $("#myPanel").slideToggle();
  });
});

自定义 slideToggle()

您可以通过传入持续时间（毫秒，或 'slow'、'fast'）来控制 .slideToggle() 动画的速度。您还可以提供一个回调函数，在动画完成后运行。

.slideToggle(duration)
.slideToggle(duration, callback)

请在下面的代码中尝试调整速度：

// HTML for context:
// <button id="speedToggleBtn">Toggle Fast</button>
// <p id="speedPanel" style="background-color: #e0ffe0; padding: 10px;">
//   I slide fast and then alert!
// </p>

$(document).ready(function() {
  $("#speedToggleBtn").click(function() {
    $("#speedPanel").slideToggle("fast", function() {
      alert("Animation finished!");
    });
  });
});

使用 fadeToggle() 淡化元素

与 .slideToggle() 类似，.fadeToggle() 方法通过为匹配元素的不透明度添加动画来显示或隐藏元素。如果元素可见，它会淡出；如果元素处于隐藏状态，它会淡入。

这会创建平滑的透明过渡效果。请查看实际效果：

// HTML for context:
// <button id="fadeToggleBtn">Toggle Fade</button>
// <div id="fadePanel" style="background-color: #ffe0e0; padding: 10px;">
//   <p>This panel fades in and out!</p>
// </div>

$(document).ready(function() {
  $("#fadeToggleBtn").click(function() {
    $("#fadePanel").fadeToggle();
  });
});

自定义 fadeToggle()

与 .slideToggle() 一样，您可以自定义 .fadeToggle() 的速度并添加回调函数。这样您就可以串联操作，或在淡化完成后执行任务。

.fadeToggle(duration)
.fadeToggle(duration, callback)

请观察缓慢的淡化效果和颜色变化：

// HTML for context:
// <button id="customFadeBtn">Toggle Custom Fade</button>
// <p id="customFadePanel" style="background-color: #e0e0ff; padding: 10px;">
//   I fade slowly and change color!
// </p>

$(document).ready(function() {
  $("#customFadeBtn").click(function() {
    $("#customFadePanel").fadeToggle(1000, function() {
      $(this).css("color", "purple");
    });
  });
});

组合滑动与淡化

您可以组合使用 .slideToggle() 和 .fadeToggle() 来实现更复杂的效果。例如，您可能希望元素向下滑动的同时淡入，或者反过来。

按顺序调用时，它们会依次应用各自的效果。若要实现真正的同步效果，通常更适合使用 .animate()（接下来我们会介绍！）。

// HTML for context:
// <button id="mixedToggleBtn">Toggle Mixed</button>
// <div id="mixedPanel" style="background-color: #ffffe0; padding: 10px;">
//   <p>I will slide and fade!</p>
// </div>

$(document).ready(function() {
  $("#mixedToggleBtn").click(function() {
    $("#mixedPanel").slideToggle(500);
    $("#mixedPanel").fadeToggle(500);
  });
});

使用动画实现简单切换

还记得基础的 .toggle() 方法吗？它只会显示或隐藏元素。不过，与 .slideToggle() 和 .fadeToggle() 一样，它也可以接受持续时间和回调参数。

与动画参数结合使用时，.toggle() 默认情况下实际上会变成 .fadeToggle()。

// HTML for context:
// <button id="simpleToggleBtn">Toggle with Animation</button>
// <p id="simpleTogglePanel" style="background-color: #f0f0f0; padding: 10px;">
//   I toggle with a default fade effect.
// </p>

$(document).ready(function() {
  $("#simpleToggleBtn").click(function() {
    $("#simpleTogglePanel").toggle("slow", function() {
      console.log("Toggle animation done!");
    });
  });
});

设计自定义切换效果

如果需要完全掌控效果，请使用 .animate() 方法。您几乎可以为任何 CSS 属性设置数值动画。要创建自定义切换效果，可以为 height、opacity，甚至 left/top 等属性添加动画。

关键是将属性动画设置到特定值，或者对 height、width 等属性使用特殊的 'toggle' 关键字。

// HTML for context:
// <button id="customAnimateBtn">Custom Animate Toggle</button>
// <div id="customAnimatePanel" style="background-color: lightgreen; padding: 10px; height: 100px; overflow: hidden;">
//   <p>I animate my height to toggle!</p>
// </div>

$(document).ready(function() {
  $("#customAnimateBtn").click(function() {
    $("#customAnimatePanel").animate({
      height: 'toggle' // Animates height to 'toggle' (show/hide)
    }, 500);
  });
});

同步自定义动画

当您需要同时更改多个 CSS 属性来实现组合切换效果时，.animate() 才真正展现出它的优势。您可以同时为 height 和 opacity 添加动画，从而实现滑动与淡化效果。

如果希望元素在不透明度变为 0 后从布局中完全消失，请记得处理 display 属性。

// HTML for context:
// <button id="combinedAnimateBtn">Combined Toggle</button>
// <div id="combinedAnimatePanel" style="background-color: lightcoral; padding: 10px; height: 100px; opacity: 1; overflow: hidden;">
//   <p>I slide AND fade!</p>
// </div>

$(document).ready(function() {
  $("#combinedAnimateBtn").click(function() {
    var panel = $("#combinedAnimatePanel");
    if (panel.is(":visible")) {
      panel.animate({
        height: '0px',
        opacity: '0'
      }, 500, function() {
        $(this).hide(); // Ensure display: none after animation
      });
    } else {
      panel.show().animate({ // Show first, then animate
        height: '100px',
        opacity: '1'
      }, 500);
    }
  });
});

检验您对切换效果的理解

以下哪个 jQuery 方法可以用于为元素创建带动画的显示/隐藏效果？

在交互式课程中回答

切换与动画总结

做得很好！您已经掌握了用于实现动态显示/隐藏效果的高级 jQuery 技巧。

我们探索了用于垂直滑动的 .slideToggle()。
我们使用 .fadeToggle() 实现了平滑的不透明度过渡。
我们了解了 .toggle() 同样可以添加动画。
最重要的是，您学会了使用 .animate() 实现完全自定义且可组合的切换效果，从而精细控制多个 CSS 属性。

继续练习，构建令人惊艳的交互式用户界面吧！

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 22
课程: 48

免费开始学习查看完整课程

常见问题解答

「高级切换与滑动效果」课时是免费的吗？

是的 — 「高级切换与滑动效果」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「高级切换与滑动效果」这节课中我会学到什么？

掌握 .slideToggle()、.fadeToggle() 和 .animate() 的高级用法，创建平滑、响应迅速且美观的显示、隐藏和过渡效果。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「高级切换与滑动效果」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 jQuery Academy