jQuery 动画效果

VIP文章 A-sleep

已于 2022-04-12 17:19:07 修改

阅读量677

点赞数

分类专栏： jQuery 文章标签：动画 jquery 前端

于 2022-01-02 22:36:38 首次发布

本文链接：https://blog.csdn.net/FellAsleep/article/details/122281880

版权

01-jquery动画

名称	用法	描述
show()	$(‘div’).show(动画时间，动画完成回调)	展示动画，主要修改元素 `宽高 + display为block`
hide()	$(‘div’).hide(动画时间，动画完成回调)	隐藏动画，主要修改元素 `宽高 + display为none`
slideDown()	$(‘div’).slideDown(动画时间，动画完成回调)	滑入动画（卷帘门效果），主要修改元素 `高度+ display为block`
slideUp()	$(‘div’).slideUp(动画时间，动画完成回调)	滑出动画（卷帘门效果），主要修改元素 `高度+ display为none`
fadeIn()	$(‘div’).fadeIn(动画时间，,动画完成回调)	淡入动画(渐变效果)，主要修改元素 `透明度1+ display为block`
fadeOut()	$(‘div’).fadeOut(动画时间，,动画完成回调)	淡出动画(渐变效果)，主要修改元素 `透明度0+ display为block`
fadeTo()	$(‘div’).fadeTo(动画时间，`目标透明度`,动画完成回调)	淡入动画(渐变效果)，主要修改元素 `透明度+ display为block`
animate()	$(‘div’).animate(属性对象,动画时间,动画速度,回调函数)	相当于webApi中封装的缓动动画animationSlow()，只是参数不同而已

1.1-显示show()与隐藏hide()

[效果预览](file:///C:/Users/张晓坤/Desktop/张晓坤前端备课资料/AB模式/05-jQuery/课程资料/备课代码/day03/02-jquery动画/01-显示与隐藏.html)

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>

</head>

<body>
    <input type="button" value="显示" id="show" />
    <input type="button" value="隐藏" id="hide" />
    <input type="button" value="切换" id="toggle" /> <br /><br />
    <div id="div1"></div>
    <br /><br />
    <div id="div2"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
     

            //1.显示动画show()
            $('#show').click(function () {
     
                /**
                 * @description: 显示动画 show()
                 * @param {type} duration动画时间(ms)：可选参数，不传没有动画
                 * @param {type} fn：可选参数，动画完成回调函数
                 * @return: 返回jquery对象，用于链式语法
                 */

                //1.1 不传参数，没有动画
                // $('#div1').show();

                //1.2 第一个参数：动画时间 单位ms
                // $('#div1').show(1000);

                //1.3 动画时间可以传三个字符串  fast:200 normal:400 slow:600
                //$('#div1').show('');  //空字符代表normal

                //1.4 第二个参数：动画完成回调函数
                // $('#div1').show('', function () {
     
                //     alert('66666');
                // });
                
                //1.5 jquery中的动画也支持隐式迭代：选中多个元素会同时执行动画
                $('div').show('');

            });
            
            //2.隐藏动画hide();
            $('#hide').on('click', function () {
     
                
                //(1) 特点与show()完全一致
                //(2) 动画效果与show()相反
                $('div').hide('');
            });

            //3.切换
            $('#toggle').on('click', function () {
     
                /* toggle()切换动画
                    1.如果元素当前display为none  隐藏， 则执行show()动画 
                    2.如果元素当前display为block 显示， 则执行hide()动画 
                 */
                $('div').toggle(1000);
            });
        });
    </script>
</body>
</html>

1.2-滑入slideDown()与滑出slideUp()

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
    <input type="button" value="滑入" id="slideDown" />
    <input type="button" value="滑出" id="slideUp" />
    <input type="button" value="切换" id="slideToggle" /><br /><br />
    <div id="div1"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
     

            //1.滑入动画 slideDown()
            $('#slideDown').on('click', function () {
     
                //(1)用法与显示隐藏动画一致
                //(2)细节区别：如果第一个参数不传，也有动画。默认为normal
                $('div').slideDown();

                $('div').slideDown('',function(){
     
                    alert('666');
                });
            });


            //2.滑出动画 
            $('#slideUp').on('click', function () {
     
                $('#div1').slideUp(1000);
            });


            //3.切换
            $('#slideToggle').on('click', function () {
     
                $('#div1').slideToggle(1000);
            });


        });
    </script>
</body>

</html>

1.3-淡入fadeIn()与淡出fadeOut()

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
    <input type="button" value="淡入" id="fadeIn" />
    <input type="button" value="淡出" id="fadeOut" />
    <input type="button" value="切换" id="fadeToggle" />
    <input type="button" value="淡入到指定透明度" id="fadeTo" /><br /><br />
    <div id="div1"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
     

            //1.淡入动画 fadeIn()
            $('#fadeIn').on('click', function () {
     
                //用法与滑入滑出动画一致
                // $('div').fadeIn();

                $('div').fadeIn(2000,function(){
     
                    alert('淡淡的我来了');
                });
            });

            //2.淡出
            $('#fadeOut').on('click', function () {
     

                $('#div1').fadeOut(function(){
     
                    alert('正如我淡淡的走');
                });

            });

            //3.切换
            $('#fadeToggle').on('click', function () {
     
                $('#div1').fadeToggle(1000);
            });


            //4.淡入到指定透明度 fadeTo
            $('#fadeTo').on('click', function () {
     

                //第一个参数：动画时间 不能不传
                //第二个参数：透明度  number类型和字符串类型都可以
                //第三个参数：回调函数
                $('#div1').fadeTo('',0.5, function () {
     
                    alert('我完事了');
                });
            });


        });
    </script>
</body>

</html>

1.4-自定义动画animate

[效果预览](file:///C:/Users/张晓坤/Desktop/张晓坤前端备课资料/AB模式/05-jQuery/课程资料/备课代码/day03/02-jquery动画/04-自定义动画animate.html)

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
     
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
        }

        #div1 {
     
            top: 50px;
        }

        #div2 {
     
            left: 300px;
            top: 200px;
            background-color: green;
        }
    </style>

</head>

<body>
    <input type="button" value="从左到右800" id="lr800" />
    <div id="div1"></div>
    <div id="div2"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
     
            //自定义动画
            //animate(参数1,);
            //参数1:是一个对象,代表做动画的属性,必选
            //参数2:动画执行的时长. 可选,如果没有写那就相当于是一个normal
            //参数3:easing:执行效果，默认为swing（缓动）  可以是linear（匀速）  可选的,默认不写是'swing'
            //参数4:动画执行完毕后的回调函数 可选的.
            $("#lr800").on('click', function () {
     

                /**
                 * @description: 自定义动画(其实就是我们以前封装的缓动动画)
                 * @param {type} 参数1： 要移动的属性对象    必须
                 * @param {type} 参数2： 动画时间           可选，默认normal 400
                 * @param {type} 参数3： 动画方式           可选，默认swing缓动    匀速：linear
                 * @param {type} 参数4： 回调函数           可选
                 * @return: jq对象，用于链式语法
                 */

                // $('#div1').animate({
     
                //     left: 300,
                //     top: 200,
                //     width: 500,
                //     height: 300,
                //     zIndex: 1,
                //     opacity: 0.5,
                // }, 2000, 'linear', function () {
     
                //     alert('666');
                // });

                //常见用法： 只传参数1 或者 加上参数4，参数23不传自动默认
                $('#div1').animate({
     
                    left: 300,
                    top: 200,
                    width: 500,
                    height: 300,
                    zIndex: 1,
                    opacity: 0.5,
                }, function () {
     
                    $('#div1').animate(
                        {
      
                            left: 500,
                            top: 50, 
                            width: 50,
                             height: 50, 
                             opacity: 0.2 
                        });
                });
            });

        });
    </script>
</body>

</html>

1.5-动画队列

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
     
            width: 200px;
            height: 300px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
    <input type="button" value="开始动画" id="start" />
    <input type="button" value="停止动画" id="stop" /> <br /><br />
    <div></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
     
            //1.模拟一个动画队列.
            $('#start').on('click', function () {
     
                $('div').slideDown(2000).slideUp(2000);
            });

            //2.stop(参数1,参数2)   ：停止当前动画 (类似于以前的缓动动画每一次之前先清除以前的定时器以本次为准)
            //参数1:是否清除队列      (后面动画是否取消)
            //参数2:是否跳转最终效果   (当前动画最终效果还要不要看一眼)
            $('#stop').on('click', function () {
     
                // $('div').stop(true,true);
                $('div').stop(true,false);
                // $('div').stop(false,true);
                // $('div').stop(false,false);

                //如果不写参数,两个参数默认就是false,false
                // $('div').stop();
            });

        });
    </script>
</body>

</html>

02-动画案例

1.1-360开机动画

在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
     
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
     
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            cursor: pointer;
        }
    </style>

</head>

<body>
    <div class="box" id="box">
        <span id="closeButton"></span>
        <div class="hd" id="headPart">
            <img src="images/t.jpg" alt="" />
        </div>
        <div class="bd" id="bottomPart">
            <img src="images/b.jpg" alt="" />
        </

最低0.47元/天解锁文章

A-sleep

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 动画效果

01-jquery动画名称用法描述show()$(‘div’).show(动画时间，动画完成回调)展示动画，主要修改元素宽高 + display为blockhide()$(‘div’).hide(动画时间，动画完成回调)隐藏动画，主要修改元素宽高 + display为noneslideDown()$(‘div’).slideDown(动画时间，动画完成回调)滑入动画（卷帘门效果），主要修改元素高度+ display为blockslideUp()$
复制链接

扫一扫