JavaScript学习教程，从入门到精通，jQuery动画效果与交互实现案例代码（38）

本文链接：https://blog.csdn.net/qq_45746668/article/details/147756485

jQuery动画效果与交互实现案例代码

开关灯效果
滑动切换导航菜单效果
导航栏下划线跟随选中菜单项
滑动效果

一、jQuery动画基础

1. jQuery动画核心方法

1.1 `show()` / `hide()`

show(): 显示匹配的元素
hide(): 隐藏匹配的元素
可接受参数：duration(持续时间), easing(缓动函数), callback(回调函数)

// 基本用法
$("#element").show();  // 立即显示
$("#element").hide();  // 立即隐藏

// 带参数用法
$("#element").show(1000, function() {
    console.log("显示完成");
});

$("#element").hide("slow", "linear", function() {
    console.log("隐藏完成");
});

1.2 `toggle()`

根据当前状态切换显示/隐藏
参数同show/hide

$("#btn-toggle").click(function() {
    $("#box").toggle(500);
});

1.3 `fadeIn()` / `fadeOut()`

淡入淡出效果
fadeIn(): 通过不透明度的变化实现淡入效果
fadeOut(): 通过不透明度的变化实现淡出效果

$("#fade-in-btn").click(function() {
    $("#box").fadeIn(1000);
});

$("#fade-out-btn").click(function() {
    $("#box").fadeOut(1000);
});

1.4 `fadeToggle()`

根据当前状态切换淡入/淡出

$("#fade-toggle-btn").click(function() {
    $("#box").fadeToggle(800);
});

1.5 `slideDown()` / `slideUp()`

垂直滑动效果
slideDown(): 向下滑动显示
slideUp(): 向上滑动隐藏

$("#slide-down-btn").click(function() {
    $("#box").slideDown();
});

$("#slide-up-btn").click(function() {
    $("#box").slideUp("fast");
});

1.6 `slideToggle()`

根据当前状态切换上下滑动

$("#slide-toggle-btn").click(function() {
    $("#box").slideToggle();
});

1.7 `animate()`

自定义动画效果
语法: animate(properties, [duration], [easing], [complete])
properties: CSS属性和值的对象
duration: 动画持续时间(毫秒)或预定义字符串(“slow”, “fast”)
easing: 缓动函数(“swing"或"linear”)
complete: 动画完成时的回调函数

$("#animate-btn").click(function() {
    $("#box").animate({
        left: "+=50px",
        opacity: 0.5,
        height: "toggle"
    }, 1000, "swing", function() {
        console.log("动画完成");
    });
});

2. 动画队列与控制

2.1 动画队列

jQuery动画默认加入队列顺序执行

2.2 `delay()`

设置动画延迟执行

$("#box").slideUp(300).delay(800).fadeIn(400);

2.3 `stop()`

停止当前动画
语法: stop([clearQueue], [jumpToEnd])
- clearQueue: 布尔值，是否清空队列
- jumpToEnd: 布尔值，是否立即完成当前动画

$("#stop-btn").click(function() {
    $("#box").stop(true, false);
});

2.4 `finish()`

立即完成所有排队动画

$("#finish-btn").click(function() {
    $("#box").finish();
});

二、开关灯效果实现

1. 实现原理

通过切换body或容器元素的背景色实现
使用toggleClass或直接修改CSS属性

2. 代码实现

<!DOCTYPE html>
<html>
<head>
    <title>开关灯效果</title>
    <style>
        body {
            transition: background-color 0.5s ease;
        }
        .dark {
            background-color: #333;
            color: #fff;
        }
        .light {
            background-color: #fff;
            color: #333;
        }
        #toggle-btn {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body class="light">
    <button id="toggle-btn">开关灯</button>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 方法1：使用toggleClass切换类
            $("#toggle-btn").click(function() {
                $("body").toggleClass("dark light");
                
                // 根据当前状态更新按钮文本
                if ($("body").hasClass("dark")) {
                    $(this).text("开灯");
                } else {
                    $(this).text("关灯");
                }
            });
            
            /*
            // 方法2：直接修改CSS属性
            $("#toggle-btn").click(function() {
                var currentBg = $("body").css("background-color");
                if (currentBg === "rgb(255, 255, 255)" || currentBg === "white") {
                    $("body").css({
                        "background-color": "#333",
                        "color": "#fff"
                    });
                    $(this).text("开灯");
                } else {
                    $("body").css({
                        "background-color": "#fff",
                        "color": "#333"
                    });
                    $(this).text("关灯");
                }
            });
            */
        });
    </script>
</body>
</html>

三、滑动切换导航菜单效果

1. 实现原理

使用slideUp/slideDown或slideToggle实现垂直滑动
使用animate实现水平滑动或更复杂效果

2. 代码实现

<!DOCTYPE html>
<html>
<head>
    <title>滑动导航菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        .nav-container {
            width: 100%;
            background-color: #333;
        }
        .nav-toggle {
            display: block;
            padding: 15px;
            background-color: #444;
            color: white;
            text-align: center;
            cursor: pointer;
        }
        .nav-menu {
            list-style: none;
            overflow: hidden;
            height: 0;
            transition: height 0.3s ease;
        }
        .nav-menu li a {
            display: block;
            padding: 12px 15px;
            color: white;
            text-decoration: none;
            border-bottom: 1px solid #555;
        }
        .nav-menu li a:hover {
            background-color: #555;
        }
        .content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="nav-container">
        <div class="nav-toggle">菜单 ▼</div>
        <ul class="nav-menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    
    <div class="content">
        <h1>网站内容</h1>
        <p>点击上方菜单按钮可以展开/收起导航菜单。</p>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 方法1：使用slideToggle实现
            $(".nav-toggle").click(function() {
                $(".nav-menu").slideToggle(300);
                
                // 切换箭头图标
                if ($(".nav-menu").is(":visible")) {
                    $(this).html("菜单 ▲");
                } else {
                    $(this).html("菜单 ▼");
                }
            });
            
            /*
            // 方法2：使用animate实现更灵活的动画
            $(".nav-toggle").click(function() {
                var menu = $(".nav-menu");
                if (menu.height() === 0) {
                    // 计算总高度（所有li高度之和）
                    var totalHeight = 0;
                    menu.find("li").each(function() {
                        totalHeight += $(this).outerHeight(true);
                    });
                    
                    menu.animate({
                        height: totalHeight
                    }, 300);
                    $(this).html("菜单 ▲");
                } else {
                    menu.animate({
                        height: 0
                    }, 300, function() {
                        $(this).css("height", "0");
                    });
                    $(this).html("菜单 ▼");
                }
            });
            */
        });
    </script>
</body>
</html>

四、导航栏下划线跟随选中菜单项

1. 实现原理

使用绝对定位的下划线元素
通过jQuery计算菜单项位置和宽度
使用animate实现平滑移动效果

2. 代码实现

<!DOCTYPE html>
<html>
<head>
    <title>导航栏下划线跟随</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        .nav-container {
            width: 100%;
            background-color: #f8f8f8;
            padding: 20px 0;
            position: relative;
        }
        .nav-menu {
            list-style: none;
            display: flex;
            justify-content: center;
            position: relative;
        }
        .nav-menu li {
            margin: 0 15px;
        }
        .nav-menu li a {
            display: block;
            padding: 10px 15px;
            color: #333;
            text-decoration: none;
            position: relative;
            transition: color 0.3s ease;
        }
        .nav-menu li a:hover {
            color: #ff6b6b;
        }
        .underline {
            position: absolute;
            bottom: -5px;
            left: 0;
            height: 2px;
            background-color: #ff6b6b;
            transition: all 0.3s ease;
        }
        .content {
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav-container">
        <ul class="nav-menu">
            <li><a href="#" class="nav-item active">首页</a></li>
            <li><a href="#" class="nav-item">产品</a></li>
            <li><a href="#" class="nav-item">服务</a></li>
            <li><a href="#" class="nav-item">关于我们</a></li>
            <li><a href="#" class="nav-item">联系我们</a></li>
            <div class="underline"></div>
        </ul>
    </div>
    
    <div class="content">
        <h1>导航栏下划线跟随效果</h1>
        <p>点击上方菜单项，下划线会平滑移动到选中项下方</p>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化下划线位置（第一个菜单项）
            function initUnderline() {
                var $activeItem = $(".nav-item.active");
                var $underline = $(".underline");
                
                if ($activeItem.length) {
                    $underline.css({
                        width: $activeItem.outerWidth(),
                        left: $activeItem.position().left
                    });
                } else {
                    // 如果没有active类，默认第一个
                    $(".nav-item").first().addClass("active");
                    initUnderline();
                }
            }
            
            // 页面加载时初始化
            initUnderline();
            
            // 菜单项点击事件
            $(".nav-item").click(function(e) {
                e.preventDefault();
                
                // 移除所有active类
                $(".nav-item").removeClass("active");
                // 给当前点击项添加active类
                $(this).addClass("active");
                
                // 获取下划线元素
                var $underline = $(".underline");
                
                // 计算新位置和宽度
                var newWidth = $(this).outerWidth();
                var newLeft = $(this).position().left;
                
                // 使用animate实现平滑移动
                $underline.stop(true).animate({
                    left: newLeft,
                    width: newWidth
                }, 300);
            });
            
            // 窗口大小改变时重新定位下划线
            $(window).resize(function() {
                initUnderline();
            });
        });
    </script>
</body>
</html>

五、综合滑动效果实现

1. 实现原理

结合多种动画方法实现复杂效果
使用回调函数实现动画序列
利用CSS3过渡增强效果

2. 代码实现：图片轮播滑动效果

<!DOCTYPE html>
<html>
<head>
    <title>图片轮播滑动效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        .slider-container {
            width: 800px;
            height: 400px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .slider {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .slide {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .slide.active {
            opacity: 1;
        }
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .slide-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            background: rgba(0,0,0,0.5);
            color: white;
            transform: translateY(100%);
            transition: transform 0.3s ease 0.2s;
        }
        .slide.active .slide-caption {
            transform: translateY(0);
        }
        .slider-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 10;
        }
        .slider-control {
            width: 12px;
            height: 12px;
            margin: 0 5px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .slider-control.active {
            background-color: white;
        }
        .slider-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            z-index: 10;
        }
        .slider-nav button {
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            width: 40px;
            height: 60px;
            font-size: 20px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .slider-nav button:hover {
            background: rgba(0,0,0,0.8);
        }
    </style>
</head>
<body>
    <div class="slider-container">
        <div class="slider">
            <div class="slide active">
                <img src="https://picsum.photos/800/400?random=1" alt="Slide 1">
                <div class="slide-caption">
                    <h3>第一张图片</h3>
                    <p>这是轮播图的第一张图片描述内容</p>
                </div>
            </div>
            <div class="slide">
                <img src="https://picsum.photos/800/400?random=2" alt="Slide 2">
                <div class="slide-caption">
                    <h3>第二张图片</h3>
                    <p>这是轮播图的第二张图片描述内容</p>
                </div>
            </div>
            <div class="slide">
                <img src="https://picsum.photos/800/400?random=3" alt="Slide 3">
                <div class="slide-caption">
                    <h3>第三张图片</h3>
                    <p>这是轮播图的第三张图片描述内容</p>
                </div>
            </div>
        </div>
        
        <div class="slider-controls">
            <div class="slider-control active" data-index="0"></div>
            <div class="slider-control" data-index="1"></div>
            <div class="slider-control" data-index="2"></div>
        </div>
        
        <div class="slider-nav">
            <button class="prev-btn">❮</button>
            <button class="next-btn">❯</button>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $slides = $(".slide");
            var $controls = $(".slider-control");
            var currentIndex = 0;
            var slideCount = $slides.length;
            var isAnimating = false;
            var autoSlideInterval;
            
            // 初始化轮播
            function initSlider() {
                // 显示第一张
                $slides.eq(0).addClass("active");
                $controls.eq(0).addClass("active");
                
                // 启动自动轮播
                startAutoSlide();
            }
            
            // 切换到指定索引的幻灯片
            function goToSlide(index) {
                // 如果正在动画或索引无效，则返回
                if (isAnimating || index < 0 || index >= slideCount) return;
                
                isAnimating = true;
                
                // 更新当前索引
                currentIndex = index;
                
                // 更新控制点
                $controls.removeClass("active");
                $controls.eq(index).addClass("active");
                
                // 切换幻灯片
                $slides.removeClass("active");
                $slides.eq(index).addClass("active");
                
                // 重置动画状态
                setTimeout(function() {
                    isAnimating = false;
                }, 500);
            }
            
            // 下一张
            function nextSlide() {
                var nextIndex = (currentIndex + 1) % slideCount;
                goToSlide(nextIndex);
            }
            
            // 上一张
            function prevSlide() {
                var prevIndex = (currentIndex - 1 + slideCount) % slideCount;
                goToSlide(prevIndex);
            }
            
            // 启动自动轮播
            function startAutoSlide() {
                autoSlideInterval = setInterval(nextSlide, 3000);
            }
            
            // 停止自动轮播
            function stopAutoSlide() {
                clearInterval(autoSlideInterval);
            }
            
            // 初始化
            initSlider();
            
            // 事件绑定
            $(".next-btn").click(function() {
                stopAutoSlide();
                nextSlide();
                startAutoSlide();
            });
            
            $(".prev-btn").click(function() {
                stopAutoSlide();
                prevSlide();
                startAutoSlide();
            });
            
            $(".slider-control").click(function() {
                var index = $(this).data("index");
                if (index !== currentIndex) {
                    stopAutoSlide();
                    goToSlide(index);
                    startAutoSlide();
                }
            });
            
            // 鼠标悬停时暂停自动轮播
            $(".slider-container").hover(
                function() {
                    stopAutoSlide();
                },
                function() {
                    startAutoSlide();
                }
            );
        });
    </script>
</body>
</html>