1. 技术文章
  2. jQuery的动画效果

jQuery的动画效果

由 回眸只為那壹抹淺笑 提交于 2020-03-06 03:17:11

jQuery里面有一些简单的动画效果，下面就总结和实践一下。

一、基本效果
jQuery里的基本动画效果有显示、隐藏和显示隐藏切换
1、show([s,[e],[fn]]) 显示
2、hide([s,[e],[fn]]) 隐藏
3、toggle([s],[e],[fn]) 显示隐藏切换
下面是用法练习：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">点击</button>
<div class="block" style=" width: 200px; height: 200px; background-color: red">

</div>
<script src="jquery/jquery.js"></script>
<script>
    $(function () {
        var count=0;
        $(".btn").click(function () {
            count++;
            if (count % 2 == 0) {
                $(".block").show(1,function (){
                    console.log("动画完成");
                });
            }
            else {
                $(".block").hide(1,function (){
                    console.log("动画完成");
                });
            }
            //$(".block").toggle();  //参数也是   speed  easing  fn
        });
    });
</script>
</body>
</html>

效果图：
在这里插入图片描述
当第一次点击按钮时，红块隐藏，再点击一次就变成显示，以此交替。

二、滑动效果
jQuery里的滑动效果有三种：
1、slideDown([s],[e],[fn])
2、slideUp([s,[e],[fn]])
3、slideToggle([s],[e],[fn])
练习代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">点击</button>
<div class="block" style=" width: 200px; height: 200px; background-color: red">

</div>
<script src="jquery/jquery.js"></script>
<script>
    $(function () {
        var count=0;
        $(".btn").click(function () {
            count++;
            if(count%2==0)
            {
                $(".block").slideDown(1000,"linear",function (){
                    console.log("动画完成");
                });
            }
            else{
                $(".block").slideUp(1000,"linear",function (){
                    console.log("动画完成");
                });
            }
            /*$(".block").slideToggle(2000, "linear", function () {
                console.log("动画完成");
            });*/
        });
    });
</script>
</body>
</html>

效果图：
在这里插入图片描述
当点击按钮的时候，红块下端向上滑动，上端不动，直至红块消失；再点击一次时，红块从上至下恢复原状。

三、淡入淡出效果

淡入淡出效果包括淡入、淡出、透明化、以及交替淡入淡出。
1、fadeIn([s],[e],[fn]) 淡入
2、fadeOut([s],[e],[fn]) 淡出
3、fadeTo([[s],o,[e],[fn]]) 透明度的动画
4、fadeToggle([s,[e],[fn]]) 交替
练习一下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">点击</button>
<div class="block" style=" width: 200px; height: 200px; background-color: red">

</div>
<script src="jquery/jquery.js"></script>
<script>
    $(function () {
        var count=0;
        $(".btn").click(function () {
            count++;
            if(count%2==0)
            {
                $(".block").fadeIn(2000,"linear",function (){
                    console.log("动画执行完成");
                });
            }
            else{
                $(".block").fadeOut(2000,"linear",function (){
                    console.log("动画执行完成");
                })
            }

            //$(".block").fadeToggle(2000, "linear", function () {
            //    console.log("动画执行完成");
            //});

            //透明度的动画
            /*$(".block").fadeTo(1000,0.5,"linear",function (){
                console.log("动画完成");
            });*/
        });
    });
</script>
</body>
</html>

效果图：
在这里插入图片描述
点击按钮，红块渐渐淡出直至消失，再点击，红块渐渐淡入。
透明度的效果是：点击按钮，红块渐渐淡出到设定的透明度，再点击，红块渐渐淡入复原。

四、自定义动画
jQuery里面也可以设置自定义动画：
1、animate(p,[s],[e],[fn])1.8* params 属性 speed easing fn
2、stop([c],[j])1.7* 停止当前正在执行的动画
3、delay(d,[q]) 延迟后续动画的执行
4、finish([queue])1.9+

练习代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btnstart">start</button>
<button class="btnstop">stop</button>
<button class="btnfis">finish</button>
<div class="block" style="width: 100px; height: 100px; background-color: red"></div>
<script src="jquery/jquery.js"></script>
<script>
    $(function () {
        $(".btnstart").click(function () {
            //添加自定义动画
            $(".block").delay(1000).animate({
                marginLeft: 300,
                opacity: 0.3
            }, 2000, "linear", function () {
                console.log("动画完成1");
            }).animate({
                marginTop: 300,
                opacity: 1
            }, 2000, "linear", function () {
                console.log("动画完成2");
            }).delay(1000).animate({
                marginLeft: 0,
                opacity: 0
            }, 2000, "linear", function () {
                console.log("动画完成3");
            }).animate({
                marginTop: 0,
                opacity: 1
            }, 2000, "linear", function () {
                console.log("动画完成4");
            });


            // queue(e,[q])  获取当前元素的动画队列
            console.log($(".block").queue().length);
        });

        //点击停止当前元素正在执行的动画
        //stop  是否清除队列   是否立即完成
        $(".btnstop").click(function () {
            $(".block").stop(true);
            //写 false就是默认不带参数的效果
            //写true  两个参数是  true false
            //写true  true  是清除队列  和立即完成当前动画
        });
        //finish  //清除队列   队列动画直接完成
        $(".btnfis").click(function () {
            $(".block").finish();
        });
    });
</script>
</body>
</html>

效果图：
在这里插入图片描述s
点击start按钮，红块开始按照自己编写的路径进行运动演示动画，点击stop按钮，则暂停，点击finish按钮，则回到原点。

五、案例演示
案例演示一个滑块验证码的实现：
演示代码：

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

        .block {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 400px;
            height: 350px;
            border: 1px solid #000;
            border-radius: 10px;
            background-color: #f9f9f9;
        }

        .title {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .img {
            position: relative;
            height: 250px;
            width: 360px;
            margin: auto;
            border-radius: 10px;
            overflow: hidden;
        }

        .silder {
            position: relative;
            width: 400px;
            height: 60px;
        }

        .list {
            height: 250px;
            width: 360px;
            vertical-align: middle;
        }

        .sildermenu {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 30px;
            width: 360px;
            border-radius: 20px;
            background-color: #c0c0c0;
        }

        .btn {
            position: absolute;
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            border-style: none;
            outline: none;
            background-image: url("./img/yz.png");
            background-size: 40px;
            background-repeat: no-repeat;
            top: -5px;
            box-shadow: 0 0 3px #c0c0c0;
        }

        .sliderpress {
            position: absolute;
            height: 30px;
            width: 360px;
            overflow: hidden;
            border-radius: 20px;
        }

        .bgcolor {
            position: absolute;
            height: 30px;
            width: 0px;
            background-color: #6bff1b;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
        }

        .fixedborder {
            position: absolute;
            width: 60px;
            height: 60px;
            background-color: #fff;
            left: 240px;
            top: 100px;
            box-sizing: border-box;
        }

        .movebox {
            position: absolute;
            z-index: 1;
            width: 60px;
            height: 60px;
            left: 0px;
            top: 100px;
            box-sizing: border-box;
            background-image: url("./img/1.jpg");
            background-repeat: no-repeat;
            background-size: 360px 250px;
            background-position: -240px -100px;
        }

        .newbtn {
            position: absolute;
            width: 20px;
            height: 20px;
            right: 10px;
            top: 10px;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="title">
        <span>滑块验证</span>
        <img class="newbtn" src="./img/new.jpg" alt=""/>
    </div>
    <div class="img">
        <img class="list" src="./img/1.jpg" alt=""/>

        <div class="fixedborder"></div>
        <div class="movebox"></div>
    </div>
    <div class="silder">
        <div class="sildermenu">
            <div class="sliderpress">
                <div class="bgcolor"></div>
            </div>
            <button class="btn"></button>
        </div>
    </div>
</div>
<script src="jquery/jquery.js"></script>
<script>
    //jquery  仿写滑块验证
    $(function () {
        //定义变量  检测是否验证成功！
        var istrue = false;
        //建立一个数据集合  存储当前像是图 以及验证的位置相关数据
        var yzdata = [
            {
                "img": "./img/1.jpg",
                "fixedleft": 240,
                "fixedtop": 100,
                "moveleft": 0,
                "movetop": 100
            },
            {
                "img": "./img/2.jpg",
                "fixedleft": 230,
                "fixedtop": 80,
                "moveleft": 0,
                "movetop": 80
            },
            {
                "img": "./img/3.jpg",
                "fixedleft": 200,
                "fixedtop": 80,
                "moveleft": 0,
                "movetop": 80
            },
            {
                "img": "./img/4.jpg",
                "fixedleft": 170,
                "fixedtop": 80,
                "moveleft": 0,
                "movetop": 80
            }
        ]
        //定义变量接收随机的数据
        var randomdata = null;
        var count = 0;
        //点击刷新键   刷新图片  以及验证的位置
        $(".newbtn").click(function () {
            //var index = Math.floor(Math.random() * yzdata.length);
            count++;
            if (count > yzdata.length - 1) {
                count = 0;
            }
            randomdata = yzdata[count];
            //根据随机的数据刷新界面
            $(".list").attr("src", randomdata.img);
            $(".fixedborder").css({
                left: randomdata.fixedleft,
                top: randomdata.fixedtop,
                backgroundPosition: (-randomdata.fixedleft) + "px " + (-randomdata.fixedtop) + "px"
            });
            $(".movebox").css({
                left: randomdata.moveleft,
                top: randomdata.movetop,
                backgroundImage: "url(" + randomdata.img + ")",
                backgroundPosition: (-randomdata.fixedleft) + "px " + (-randomdata.fixedtop) + "px"
            });
        });


        //给按钮添加拖动移动事件
        $(".btn").mousedown(function (e) {
            var that = $(this);
            //获取鼠标按下起始点x坐标
            var startx = e.pageX || e.clientX;
            //给block添加移动事件
            $(".block").on("mousemove", function (e) {
                //获取鼠标滑动x坐标
                var movex = e.pageX || e.clientX;
                //将计算的x差赋值给that的pleft属性
                var offsetbtnleft = movex - startx < 0 ? 0 : (movex - startx) + 40 <= 360 ? movex - startx : 320;
                that.css({
                    left: offsetbtnleft
                });
                //按钮移动的同时设置底下的颜色元素一块动
                $(".bgcolor").css({
                    width: offsetbtnleft + 20
                });
                //按钮在移动的时候  movebox跟着移动
                $(".movebox").css({
                    left: offsetbtnleft
                });
                //移动在这个位置
                //offsetbtnleft  使用这个值来进行检测
                //给一点小误差  2px  误差
                var fixedleft = parseFloat($(".fixedborder").css("left"));
                if (offsetbtnleft >= fixedleft - 2 && offsetbtnleft + 60 <= fixedleft + 62) {
                    istrue = true;//直接修改变量
                }
            }).mouseup(function () {
                $(this).off();
                btnleftgo();
            }).mouseleave(function () {
                //鼠标离开的时候直接移除mousemove事件
                $(this).off();
                btnleftgo();
            });
        }).mouseup(function () {
            $(".block").off();
            btnleftgo();
        });
        //在三个off移除的时候 考虑 是否验证成功！  不成功则弹回
        function btnleftgo() {
            if (istrue) {
                //验证成功！
                //验证成功的时候 写相应的操作
                console.log("验证成功！");
                $(".fixedborder").hide();
                $(".movebox").hide();
                $(".bgcolor").html("验证成功 √").css({
                    color: "red"
                });
            }
            else {
                //按钮弹回去
                $(".btn").animate({
                    left: 0
                }, 10);
                $(".bgcolor").animate({
                    width: 0
                }, 10);
                $(".movebox").animate({
                    left: 0
                }, 10);
            }
        }
    });
</script>
</body>
</html>

效果图：
在这里插入图片描述滑动后：
在这里插入图片描述六、总结
在进行jQuery动画效果的学习时会发现一系列的联动性，将简单的动画效果联合起来，组成一个更为高级的动画效果，这样会对jQuery动画效果这里更加的印象深刻。

标签
jquery动画
jquery事件
html代码
background
position
按钮
jquery
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!