jquery 页面跳转动画

jQuery 页面跳转动画主要涉及到使用 jQuery 库来实现页面之间的平滑过渡效果。以下是关于这个问题的详细解答：

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。页面跳转动画通常指的是在用户从一个页面导航到另一个页面时，通过动画效果使过渡更加自然和吸引人。

类型与应用场景

淡入淡出（Fade In/Out）：适用于需要隐藏或显示内容的场景。
滑动（Slide）：适合于列表或面板的展开和收起。
弹跳（Bounce）：用于强调某个元素的重要性。
旋转（Rotate）：常用于图标或图片的切换效果。

示例代码

以下是一个简单的 jQuery 页面跳转动画的示例，使用了淡入淡出效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Page Transition</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        .page { display: none; }
        .active { display: block; }
    </style>
</head>
<body>

<div id="page1" class="page active">
    <h1>Page 1</h1>
    <button onclick="navigateTo('page2')">Go to Page 2</button>
</div>

<div id="page2" class="page">
    <h1>Page 2</h1>
    <button onclick="navigateTo('page1')">Go to Page 1</button>
</div>

<script>
function navigateTo(pageId) {
    $('.page').removeClass('active').fadeOut(500, function() {
        $('#' + pageId).addClass('active').fadeIn(500);
    });
}
</script>

</body>
</html>