jQuery基本动画效果及自定义动画实践-CSDN博客

本文链接：https://blog.csdn.net/qq_45466959/article/details/130992364

1.常用动画

1.1 元素显示隐藏

jQuery实现显示、隐藏： show()、hide()、toggle()方法

方法	描述
show([speed,[easing],[fn]])	显示隐藏的匹配元素
hide([speed,[easing],[fn]])	隐藏显示的匹配元素
toggle([speed],[easing],[fn])	元素显示与隐藏切换

显示方法参数介绍：

参数	描述
speed	表示动画速度，取值范围为预定义字符串（‘slow’,‘fast’,‘normal’）==>（慢，快，正常）或者表示动画时长毫秒数的数值（如1000表示1秒）
easing	用来指定切换效果，默认swing(在开头/结尾移动慢，在中间移动快),linear( 匀速移动)
fn	在动画完成时执行的函数，每个元素执行一次

show([speed,[easing],[fn]])
//传入时间参数：
$('div').show(1000);
//传入回调函数：
$('div').show(1000,function(){
    alert('动画执行完成')；
})

使用toggle方法切换元素显示、隐藏状态：

在这里插入图片描述

在jQuery中toggle()的源代码：

toggle:function(state){
    if(typeof state ==='boolean'){
        return state ? this.show() :this.hide();
    }
    return this.each(function(){
        if(isHidden(this)){
            jQuery(this).show();
        }else {
            jQuery(this).hide();
        }
    });
}

<!--示例-->
<body>
    <input type="button" value="隐藏图形" id="btnHide">
    <input type="button" value="显示图形" id="btnShow">
    <input type="button" value="切换显示隐藏效果" id="btnToggle"><br>
    <div style="width: 100px;height: 100px; background: pink;"></div>
    <script>
        //隐藏图形
        $('#btnHide').click(function () {
            $('div').hide();
        });
        //显示图形
        $('#btnShow').click(function () {
            $('div').show(1000, function () {
                $('div').css('border-radius', '50%');
            })
        });
        //切换显示隐藏效果
        $('#btnToggle').click(function () {
            $('div').toggle('slow', 'linear');
        });
    </script>
</body>

在这里插入图片描述

1.2 元素淡入淡出

jQuery实现淡入、淡出、动画形式改变透明度： fadeIn ()、fadeout()、fadeTo()、fadeToggle()

方法	说明
fadeIn([speed],[easing],[fn])	淡入显示匹配元素
fadeOut([speed],[easing],[fn])	淡出隐藏匹配元素
fadeTo([[speed],opacity,[easing],[fn]])	以淡入淡出方式将匹配元素调整到指定的透明度
fadeToggle([speed,[easing],[fn]])	在fadeIn()和fadeOut()两种效果间的切换

//淡出
$(selector).fadeOut(1000);
//淡出
$(selector).fadeIn(1000);
//切换
$(selector).fadeToggel(1000);
//淡到
$(selector).fadeTo(1000,05);

<!--示例-->
<style>
    div {
        width: 100px;
        height: 200px;
        border: 1px solid black;
    }

    div img {
        width: 100px;
        height: 200px;
    }

    div img:first-child {
        display: none;
    }
</style>

<body>
    <input type="button" value="开灯">
    <div><img src="./on.png">
        <img src="./off.png">
    </div>
    <script>
        $('input').click(function () {
            $('img:last').fadeOut('fast', function () {
                $('img:first').fadeIn('slow', function () {
                    $('input').val('灯亮了')
                })
            });
        });
        $('div').fadeTo('1200', '0.3', function () {
            console.log('透明度已调节')
        });
    </script>
</body>

在这里插入图片描述

1.3 元素上滑下滑

jQuery实现滑入、滑出、动画形式改变透明度： slideDown ()、slideUp ()、slideToggle()

方法	说明
slideDown([speed],[easing],[fn])	垂直滑动显示匹配元素（向下增大）
slideUp([speed],[easing],[fn])	垂直滑动显示匹配元素（向上向下）
slideToggle([[speed],[easing],[fn]])	在上滑和下滑两种效果间的切换

<!--示例-->
<style>
    img {
        width: 200px;
        height: 360px;
    }

    .wrap {
        position: relative;
        width: 200px;
        height: 360px;
    }

    .wrap div {
        position: absolute;
        width: 130px;
        height: 228px;
        top: 63px;
        left: 34px;
        text-align: center;
        line-height: 150px;
    }

    .wrap div.img1 {
        z-index: 3;
        background: pink;
    }

    .wrap div.img2 {
        z-index: 2;
        background: lightgreen;
    }

    .wrap div.img3 {
        z-index: 1;
        background: plum;
    }
</style>

<body>
    <input type="button" value="滑动">
    <div class="wrap">
        <img src="iphone.png" alt="">
        <div class="img1">滑动有惊喜</div>
        <div class="img2">只要努力</div>
        <div class="img3">就能成功</div>
    </div>
    <script>
        $('input').click(function () {
            //为slideUp()方法传入第三个参数-回调函数
            $('.wrap div:first').slideUp(1500, function () {
                //在slideUp上滑动画完成之后执行slideUp
                //传入函数体作为回调函数
                $('.wrap div:eq(1)').slideUp(1000);
            })
        });
    </script>
</body>

在这里插入图片描述

注意：

fadeIn / fadeOut、slideDown / slideUp：未传入动画速度参数情况下，也有动画效果
show / hide：在未传入动画速度参数时无动画效果

2.自定义动画

自定义动画： jQuery提供动画方法animate()，方便开发者设置动画效果

用途：方便开发者设置动画执行形式

语法：

$(selector).animate(styles, speed, callback);

参数： styles表示动画执行目标样式属性和值组合成的键值对，可以包含多个属性名和属性值，speed表示动画的执行时间，单位是毫秒，callback表示动画执行完成之后的回调函数

2.1 简单自定义动画

案例演示：

把li元素的margin-left属性在1秒的时间内由当前状态改变为15像素。

并在动画完成之后，把所有索引值为奇数的li标签的margin-top值在1.5秒内改变为25像素。

<!--示例-->
<style>
    ul {
        width: 300px;
        height: 260px;
        background: deepskyblue;
        padding: 20px;
        border-radius: 30px;
    }

    ul li {
        list-style: none;
        float: left;
    }

    ul li img {
        width: 20px;
        height: 20px;
    }

    ul li img {
        width: 20px;
        height: 20px;
    }
</style>

<body>
    <input type="button" value="snow">
    <ul>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
        <li><img src="snowflake.png" alt=""></li>
    </ul>
    <script>
        $('input').click(function () {
            $('ul li').animate({
                marginLeft: '15px'
            }, 1000, function () {
                $('ul li:odd').animate({
                    marginTop: '25px'
                }, 1500, function () {
                    $('ul li:even img').animate({
                        width: '45px',
                        height: '45px'
                    }, 1200, function () {
                        $('ul li:even').animate({
                            marginTop: '60px'
                        }, 1000);
                    })
                })
            })
        });
    </script>
</body>

在这里插入图片描述

2.2 加入表达式的动画

animate()方法的第一个参数是动画的目标样式属性和值组合成的键值对，每一项的值可以是带运算符的表达式。如“+=100px”表示增大100px，“-=100px”表示减少100px。

$('input').click(function(){
    $('div').animate({
        height:'+=100px',
        width:'-=100px'
    });
});

<!--示例-->
<style>
    div {
        width: 160px;
        height: 10px;
        padding: 20px;
        text-align: center;
        overflow: hidden;
        position: absolute;
        background: url("./flag.png") top center no-repeat;
        background-size: 200px 500px;
    }

    div span {
        margin-top: 50px;
        margin-left: -10px;
        line-height: 50px;
        display: inline-block;
        width: 20px;
        font-family: "KaiTi";
        font-size: 40px;
        color: #FFF;
    }
</style>

<body>
    <input type="button" value="show">
    <div>
        <span>青春有理想和梦想</span>
    </div>
    <script>
        $('input').click(function () {
            $('div').animate({
                height: '+=470px',
                left: '+=150px',
                top: '+=50px'
            }, 1500, function () {
                $('div').animate({
                    height: '-=470px',
                    left: '-=150px',
                    top: '-=50px'
                }, 1000)
            })
        })
    </script>
</body>

在这里插入图片描述

3.停止动画

3.1 停止动画

动画队列：同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到效果队列中，这样就形成了动画队列。

停止动画：用于停止动画效果，通过此方法，可以让动画队列后面的动画提前执行。

使用方式：

$(selector).stop( stopAll , goToEnd );

参数： stopAll表示是否清除动画队列，默认是false；goToEnd表示是否立即完成当前的动画，默认是false。

停止动画的方法的使用方式：

$('div').stop();  //停止当前动画，继续下一个动画
$('div').stop(true);//清除div元素动画队列中的所有动画
$('div').stop(true,true);//停止当前动画，清除动画队列中的所有动画
$('div').stop(false,true);//停止当前动画，继续执行下一个动画

<!--示例-->
<body>
    <button id="stop1">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止但要完成</button>
    <button id="stop4">完成当前并继续</button>
    <p><b>'停止'</b>停止当前动画，继续下一个动画。</p>
    <p><b>'停止所有'</b>按钮停止当前活动的动画，并清空动画队列。</p>
    <p><b>'停止但要完成'</b>完成当前动画，然后停止执行。</p>
    <p><b>'完成当前并继续'</b>完成当前动画，继续下一个动画。</p>
    <div style="background: #ceedcf;height: 100px;width: 100px;">animate</div>

    <script>
        //开始动画
        $('div').animate({
            fontSize: '3em'
        }, 5000);
        $('div').animate({
            width: '+=100px'
        }, 5000);
        //停止
        $('#stop1').click(function () {
            $('div').stop();
        });
        //停止所有
        $('#stop2').click(function () {
            $('div').stop(true);
        });
        //停止但要完成
        $('#stop3').click(function () {
            $('div').stop(true, true);
        });
        //完成当前并继续
        $('#stop4').click(function () {
            $('div').stop(false, true);
        });
    </script>
</body>

在这里插入图片描述

3.2 判断元素是否在动画状态

使用方式：

$(selector).is(':animated');

返回值：元素处于动画状态，返回值为true，否则返回值为false

<!--示例-->
<body>
    <input type="button" value="判断是否处于动画状态"><br>
    <div style="width: 100px;height: 100px; background: pink;"></div>
    <script>
        $('input').click(function () {
            if (!$('div').is(':animated')) {
                $('div').animate({
                    marginLeft: "+=100px"
                }, 1000);
            }
        });
    </script>
</body>