jquery 切换页面效果

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 切换页面效果通常指的是使用 jQuery 来实现页面元素的显示、隐藏或动画效果，从而提升用户体验。

基础概念

选择器：jQuery 使用 CSS 选择器来选取 HTML 元素。
事件处理：绑定事件处理器来响应用户的操作。
动画效果：通过内置的动画方法实现平滑的视觉效果。

类型与应用场景

淡入淡出（Fade In/Out）：适用于模态框、提示信息的显示与隐藏。
滑动（Slide Up/Down）：适合折叠面板、导航菜单的展开与收起。
自定义动画：可用于创建独特的页面转场效果。

示例代码

以下是一个简单的 jQuery 切换页面效果的示例，展示了如何使用淡入淡出效果切换两个 div 元素的可见性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 切换效果示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .box {
    width: 200px;
    height: 200px;
    display: none;
  }
  #box1 { background-color: red; }
  #box2 { background-color: blue; }
</style>
</head>
<body>

<button id="toggleBtn">切换</button>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>

<script>
$(document).ready(function(){
  let isBox1Visible = true;
  $('#toggleBtn').click(function(){
    if (isBox1Visible) {
      $('#box1').fadeOut('slow');
      $('#box2').fadeIn('slow');
    } else {
      $('#box1').fadeIn('slow');
      $('#box2').fadeOut('slow');
    }
    isBox1Visible = !isBox1Visible;
  });
});
</script>

</body>
</html>