jQuery网页切换特效代码如何实现？-网页设计-锦华智联科技

引入 jQuery

在使用任何 jQuery 代码之前，你必须在你的 HTML 页面中引入 jQuery 库，最简单的方式是通过 CDN（内容分发网络）：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery 切换特效示例</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 一些基本样式，让效果更明显 */
        body {
            font-family: sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
        }
        .page {
            display: none; /* 默认隐藏所有页面 */
            padding: 20px;
            border: 1px solid #eee;
            margin-top: 20px;
        }
        .page.active {
            display: block; /* 只显示激活的页面 */
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav li {
            display: inline-block;
            margin: 0 10px;
        }
        nav a {
            text-decoration: none;
            padding: 10px 20px;
            border: 1px solid #007bff;
            color: #007bff;
            border-radius: 5px;
        }
        nav a:hover, nav a.active {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>jQuery 网页切换特效演示</h1>
        <!-- 导航菜单 -->
        <nav>
            <ul>
                <li><a href="#" class="nav-link active" data-page="page1">淡入淡出</a></li>
                <li><a href="#" class="nav-link" data-page="page2">滑动效果</a></li>
                <li><a href="#" class="nav-link" data-page="page3">折叠/展开</a></li>
            </ul>
        </nav>
        <!-- 页面内容 -->
        <div id="page1" class="page active">
            <h2>页面 1: 淡入淡出效果</h2>
            <p>这是第一个页面，点击上方导航可以切换到其他页面，并看到不同的切换动画。</p>
        </div>
        <div id="page2" class="page">
            <h2>页面 2: 滑动效果</h2>
            <p>这是第二个页面，使用了滑动切换动画。</p>
        </div>
        <div id="page3" class="page">
            <h2>页面 3: 折叠/展开效果</h2>
            <p>这是第三个页面，点击时会折叠，再次点击展开。</p>
        </div>
    </div>
    <!-- 在这里放置你的 jQuery 代码 -->
    <script>
        // 所有 jQuery 代码都应该放在 $(document).ready() 函数中
        // 这确保了在 DOM（文档对象模型）完全加载后才执行代码
        $(document).ready(function(){
            // ... 你的代码将写在这里 ...
        });
    </script>
</body>
</html>

我们将在 <script> 标签内填充代码,实现不同的切换特效。

淡入淡出

这是最经典的切换效果,通过改变元素的不透明度来实现。

代码实现：

$(document).ready(function(){
    // 为所有导航链接添加点击事件
    $('.nav-link').on('click', function(event){
        // 阻止链接的默认跳转行为
        event.preventDefault();
        // 1. 移除所有页面和链接的 'active' 类
        $('.page').removeClass('active');
        $('.nav-link').removeClass('active');
        // 2. 为当前点击的链接添加 'active' 类
        $(this).addClass('active');
        // 3. 获取目标页面的 ID
        var targetPageId = $(this).data('page');
        // 4. 使用淡出效果隐藏当前所有页面
        $('.page').fadeOut(400, function(){
            // 淡出动画完成后，执行淡入效果显示目标页面
            $('#' + targetPageId).fadeIn(400).addClass('active');
        });
    });
});

代码解释：

（图片来源网络，侵删）

$('.nav-link').on('click', ...)：为所有带有 nav-link 类的元素绑定点击事件。
event.preventDefault()：阻止 <a> 标签的默认跳转行为,否则页面会刷新。
removeClass('active')：移除所有页面的激活状态,并移除所有导航链接的激活状态。
$(this).addClass('active')：为当前被点击的导航链接添加激活状态,以便高亮显示。
$(this).data('page')：获取被点击链接上 data-page 属性的值（"page1"）。
$('.page').fadeOut(400, ...)：选择所有页面，在 400 毫秒内执行淡出动画。fadeOut 是一个异步操作，它的回调函数 function(){...} 会在动画完成后执行。
$('#' + targetPageId).fadeIn(400).addClass('active')：在淡出动画完成后，淡入目标页面，并为其添加 active 类。

滑动效果

滑动效果通过改变元素的 height 或 top 属性来实现,给人一种页面从上下滑入滑出的感觉。

代码实现：

$(document).ready(function(){
    // 初始化所有页面为隐藏状态，高度为0
    $('.page').css({
        'display': 'block',
        'height': '0',
        'overflow': 'hidden',
        'padding-top': '0',
        'padding-bottom': '0',
        'margin-top': '0',
        'margin-bottom': '0'
    });
    // 默认显示第一个页面
    $('#page1').css({
        'height': $('#page1').height() + 'px', // 获取内容实际高度
        'overflow': 'visible',
        'padding': '20px',
        'margin': '20px 0'
    });
    $('.nav-link').on('click', function(event){
        event.preventDefault();
        var targetPageId = $(this).data('page');
        var targetPage = $('#' + targetPageId);
        var currentPage = $('.page:not([style*="height: 0px"])'); // 找到当前显示的页面
        // 更新导航链接的激活状态
        $('.nav-link').removeClass('active');
        $(this).addClass('active');
        // 如果点击的是当前页面，则不做任何操作
        if (currentPage.attr('id') === targetPageId) {
            return;
        }
        // 隐藏当前页面（向下滑出）
        currentPage.animate({
            'height': '0',
            'padding-top': '0',
            'padding-bottom': '0',
            'margin-top': '0',
            'margin-bottom': '0'
        }, 400, function(){
            // 隐藏后，重置样式
            $(this).css({
                'height': '0',
                'overflow': 'hidden',
                'padding': '0',
                'margin': '0'
            });
            // 显示目标页面（向上滑入）
            targetPage.css({
                'height': '0',
                'overflow': 'hidden',
                'padding': '0',
                'margin': '0'
            }).animate({
                'height': targetPage.height() + 'px',
                'padding': '20px',
                'margin': '20px 0'
            }, 400);
        });
    });
});

代码解释：

初始化时，我们通过 CSS 将所有页面设置为 display: block 但 height: 0，并隐藏溢出内容，这样它们存在于文档流中,但不可见。
点击事件处理中，我们使用 animate() 方法来动态改变元素的多个属性（高度、内边距、外边距）。
我们首先找到当前显示的页面（高度不为0的那个），然后将其 animate 到高度为0,实现滑出效果。
在滑出动画的回调函数中，我们再将目标页面 animate 到其内容的实际高度,实现滑入效果。

折叠/展开

这个特效通常用于手风琴（Accordion）效果,一次只展开一个部分。

（图片来源网络，侵删）

代码实现：

$(document).ready(function(){
    // 为所有导航链接添加点击事件
    $('.nav-link').on('click', function(event){
        event.preventDefault();
        var targetPageId = $(this).data('page');
        var targetPage = $('#' + targetPageId);
        var currentPage = $('.page:not([style*="display: none"])'); // 找到当前显示的页面
        // 更新导航链接的激活状态
        $('.nav-link').removeClass('active');
        $(this).addClass('active');
        // 如果点击的是当前页面，则不做任何操作
        if (currentPage.attr('id') === targetPageId) {
            return;
        }
        // 隐藏当前页面（折叠）
        currentPage.slideUp(400, function(){
            // 折叠后，显示目标页面（展开）
            targetPage.slideDown(400).addClass('active');
        });
    });
});

代码解释：

slideUp(speed, callback)：通过改变高度和透明度来隐藏元素,效果像百叶窗向上关闭。
slideDown(speed, callback)：与 slideUp 相反,用于显示元素。
这个实现非常简单，我们只需要调用这两个方法即可。slideUp 隐藏当前页面，其回调函数中 slideDown 显示目标页面。

现代替代方案：CSS 过渡

虽然 jQuery 非常强大，但对于简单的切换效果，现代 CSS（特别是 CSS3）提供了更轻量、性能更好的解决方案。

HTML 结构（与之前相同）：

<nav>
    <ul>
        <li><a href="#" class="nav-link active" data-page="page1">淡入淡出</a></li>
        <li><a href="#" class="nav-link" data-page="page2">滑动效果</a></li>
        <li><a href="#" class="nav-link" data-page="page3">折叠/展开</a></li>
    </ul>
</nav>
<div id="page1" class="page active">...</div>
<div id="page2" class="page">...</div>
<div id="page3" class="page">...</div>

CSS 代码：

/* ... 其他样式保持不变 ... */
/* 基础页面样式 */
.page {
    /* 使用 opacity 和 transition 来实现淡入淡出 */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    /* 使用 max-height 和 overflow 来实现滑动效果 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out, margin 0.4s ease-in-out;
    padding: 0 20px; /* 默认内边距为0，展开时恢复 */
    margin: 0 0 20px 0; /* 默认外边距为0 */
}
/* 激活状态的页面 */
.page.active {
    opacity: 1;
    max-height: 1000px; /* 设置一个足够大的值 */
    padding: 20px;
    margin: 20px 0;
}

JavaScript 代码（非常简单）：

$(document).ready(function(){
    $('.nav-link').on('click', function(event){
        event.preventDefault();
        // 移除所有激活状态
        $('.page').removeClass('active');
        $('.nav-link').removeClass('active');
        // 添加当前激活状态
        $(this).addClass('active');
        $('#' + $(this).data('page')).addClass('active');
    });
});

CSS 方案的优势：

性能更优：浏览器对 CSS 动画的优化通常比 JavaScript 更好，尤其是在处理布局变化（如 height, top）时。
代码更少：逻辑更简单，JavaScript 只需要负责添加/移除类名，CSS 负责动画效果。
更流畅：避免了 $(window).resize() 等复杂场景下的计算问题。

特效	实现方式	优点	缺点
jQuery 动画	使用 `.fadeIn()`, `.fadeOut()`, `.slideUp()`, `.slideDown()`, `.animate()`	代码直观，兼容性好，功能强大，能实现非常复杂的动画。	需要引入 jQuery 库，对于简单特效来说略显笨重，性能可能不如 CSS。
CSS 过渡	使用 `transition` 属性和 `opacity`/`max-height` 等。	性能最佳，代码量少，不依赖外部库，是现代网页开发的主流方式。	动画相对简单，对于复杂的、基于路径的动画实现起来比较困难。

对于新项目，强烈推荐优先使用 CSS 过渡，它更轻量、更高效，而 jQuery 在需要处理复杂逻辑、兼容旧浏览器或实现非常精细的动画控制时,仍然是一个非常有价值的工具。