使用jQuery.animate实现简单的页面切换效果

本文介绍如何使用jQuery.animate()实现简单的页面切换效果。通过修改页面的`margin-top`属性,配合CSS绝对定位和z-index属性,实现平滑过渡。示例中包含两个页面,通过侧边栏点击进行切换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用jQuery.animate实现简单的页面切换效果


涉及知识点

  • jQuery.animate
  • css position
  • css flex 布局

设计与实现

jQuery.animate()

语法:

$(selector).animate(styless[,duration][,easing][,callback]);

styles Object 必须 定义动画的css属性。例如: { marginTop: “100px” } ( css 属性需采用驼峰标记法书写 )
duration int 可选 定义效果完成的时长。单位毫秒,默认为 400 ms。
easing: string 动画的运行曲线。默认 “swing” (开始和结束缓慢中间加速)。
callback Function 动画完成之后的回调函数。

css 绝对定位

position: absolute; 绝对定位让 。.page都层叠在一起
然后通过修改 z-index 确定哪一个页面位于最上层。

css flex 布局

非常方便的实现页面元素的定位。

推荐一个学习 flex 布局的游戏 - Flexbox Froggy

最终实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate</title>
    <style>
        /* 页面样式 */
        * {
            margin: 0;
            padding: 0
        }

        html, body {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .page {
            position: absolute;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

        .page.active {
            z-index: 2;
        }

        .page-blue {
            background-color: blue;
        }

        .page-red {
            background-color: red;
        }

        .page-slide {
            position: absolute;
            z-index: 999;
            width: 24px;
            height: 100%;
            right: 24px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }

        .slide-item {
            width: 24px;
            height: 24px;
            border-radius: 12px;
            background-color: #fff;
            cursor: pointer;
        }

        .slide-item:hover {
            border: 1px solid #222;
        }

        .slide-item:not(:last-child) {
            margin-bottom: 6px;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 页面 -->
        <div class="page page-blue active" id="page1">1</div>
        <div class="page page-red" id="page2">2</div>

        <!-- 侧边栏 -->
        <div class="page-slide">
            <div class="slide-item" data-target="page1">1</div>
            <div class="slide-item" data-target="page2">2</div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
    <script>
        $(function () {
            // 逻辑代码
            var current = $(".page.active");

            $(".slide-item").on("click", function(ele) {
                var target = $("#"+ $(ele.currentTarget).data("target"));

                if (target.hasClass('active')) {
                    return ;
                }

                current.animate({
                        marginTop: "100%"
                    },
                    500,
                    "swing",
                    function () {
                        current.removeClass('active');
                        current.css("margin-top", 0);
                        target.addClass('active');
                        current = target;
                    }
                );
            });
        });
    </script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值