概述

jQuery的动画就是通过不断改变元素的属性值来实现动画效果;了解jQuery内置动画方法,参数含义及其各自特点,运用其动画方法做出简单的动画效果

显示/隐藏/切换动画(元素宽高同步增/减)

show([speed,[easing],[fn]])/hide([speed,[easing],[fn]])/toggle([speed],[easing],[fn])

三个动画方法的参数含义类同,只以显示动画方法为例

<input type="button" value="显示" /><button>隐藏</button><input type="button" value="切换" /><div style="width:100px;height:100px;background-color:red;display:none;"></div>

1)show()显示元素

show()方法使用格式:show([speed,[easing],[fn]])(大括号表示参数可省略)

1)无参数直接显示

2)speed:指定时间内元素显示完毕(自带透明度)

三个预定义的值“slow(默认)”,"normal","fast"(时间分别为0.6s 0.4s 0.2s加上引号)或直接输入毫秒值,动画效果到时即止

3)easing:用来指定切换效果 默认是“swing”,可用参数“linear”

3.1 swing(默认):动画显示的效果是先慢中间快最后又慢

3.2 linear:动画显示速度是匀速的

4)fn():动画执行完毕后要执行的回调函数

<script src="jq/jquery-3.5.1.js"></script><script type="text/javascript">        $(function () {            $('input:eq(0)').click(function () {                ////1 无参数直接显示                //$('div').show();//等价于 $('div').css('display','block');                //2 speed:slow(缓慢)normal(正常)fast快速 毫秒值(指定时间)                //$('div').show('slow');                //$('div').show('normal');                //$('div').show('fast');                //$('div').show(3000);//3秒时间                //3 easing: swing(慢快慢)  linear(匀速)                //$('div').show(3000, 'swing');                //$('div').show(3000, 'linear');                //4 fn()元素在3秒内匀速显示完毕后执行此函数                $('div').show(3000, 'linear', function () {                    //背景色变蓝                    $('div').css('background-color','blue');                });            });            $('button').click(function () {                //隐藏动画                $('div').hide(3000, 'linear', function () {                    $('div').css('background-color', 'red');                });            });            $('input:last').click(function () {                //切换动画                $('div').toggle(3000, 'swing');            });        });    </script>

元素显示

滑动的展开/收缩/切换动画(元素高度增减)

slideDown([speed],[easing],[fn])/slideUp([speed,[easing],[fn]])/slideToggle([speed],[easing],[fn]) 参数含义如上,不再赘述

$(function () {            //滑动展开            $('input:eq(0)').click(function () {                $('div').slideDown("slow");            });            //滑动收缩            $('button').click(function () {                $('div').slideUp("slow");            });            //滑动切换            $('input:eq(1)').click(function () {                $('div').slideToggle(3000);            });        });

fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn])/fadeToggle([speed,[easing],[fn]])

fadeTo([speed],opacity,[easing],[callback])(必须参数opacity其范围[0-1])到指定不透明度

<input type="button" value="淡入" /><button>淡出</button><input type="button" value="指定不透明度" /><input type="button" value="切换" /><div style="width:100px;height:100px;background-color:red;display:none;"></div>$(function () {            //淡入            $('input:eq(0)').click(function () {                $('div').fadeIn("slow");            });            //淡出            $('button').click(function () {                $('div').fadeOut("slow");            });             //到指定透明度            $('input:eq(1)').click(function () {                $('div').fadeTo(3000,0.6);            });            //切换            $('input:eq(2)').click(function () {                 $('div').fadeToggle(3000);            });        });

改变元素不透明度到0.6

以上三种动画的特点:

1)显示/隐藏动画:管元素的宽高与不透明度逐渐增减

2)展开/收缩动画:只管元素的高度增减,没有不透明度

3)淡入/淡出动画:不管元素的宽高,只管不透明度(0透明/1不透明)

animate动画

animate(params,[speed], [fn])参数params:json对象(必须)

设置属性值是数值的有动画效果,设置如背景色有用却没有渐变效果(一直使用回调函数可以也实现)

这个动画方法之前的三种方法设置动画效果更灵活

通过动画animate()方法将之前三种动画效果全部实现

        $(function () {            //自定义动画            $('button').click(function () {                //鼠标移入移出事件                $('div').hover(                    //鼠标移入 div宽高增长到200                    function () {                        $('div').animate({ width: 200, height: 200 }, 3000, 'linear');                    },                    //鼠标移出 div恢复默认宽高100                    function () {                        $('div').animate({ width: 100, height: 100 }, 3000, 'linear', function () {                            //div滑动展开                            $('div').animate({ height: 200 }, 3000, 'linear', function () {                                //div滑动收缩                                $('div').animate({ height: 100 }, 3000, 'linear', function () {                                    //div淡出                                    $('div').animate({ opacity: 0 }, 3000, 'linear', function () {                                        //div淡入                                        $('div').animate({ opacity: 1 }, 3000, 'linear', function () {                                            //div到指定不透明度                                            $('div').animate({ opacity: 0.6 }, 3000, 'linear', function () {                                                alert('div动画执行完毕');                                            });                                        });                                    });                                });                            });                        });                    });            });        });

通过动画方法改变div属性

案例

浏览器窗口右下角悬浮一个长方形div,为div注册一个鼠标移入/移出事件,实现鼠标移入首先宽度与不透明度增加,然后高度增加,鼠标移出,高度收缩与不透明度恢复默认,然后宽度收缩

<div style="width:50px;height:100px;opacity:0.3; background-color:red;position:fixed;right:10px;bottom:100px;"></div>$(function () {            $('div').mouseover(function () {                $('div').animate({ width: 100, opacity: 1 }, 1000, 'linear', function () {                    $('div').animate({ height: 200 }, 3000, 'linear');                })            });            $('div').mouseout(function () {                $('div').animate({ height: 100, }, 1000, 'linear', function () {                    $('div').animate({ width: 50, opacity: 0.3 }, 3000, 'linear');                });            });        });

全部代码:

<!DOCTYPE html><html xmlns=";><head>    <title></title></head><body>    <!--<input type="button" value="淡入" />    <button>淡出</button>    <input type="button" value="指定不透明度" />    <input type="button" value="切换" />-->    <!--<button>自定义动画</button>-->    <!--<div style="width:100px;height:100px;background-color:red;"></div>-->    <div style="width:50px;height:100px;opacity:0.3; background-color:red;position:fixed;right:10px;bottom:100px;"></div>    <script src="jq/jquery-3.5.1.js"></script>    <script type="text/javascript">        //显示/隐藏/切换 动画        $(function () {            //$('input:eq(0)').click(function () {            //    ////1 无参数直接显示            //    //$('div').show();//等价于 $('div').css('display','block');            //    //2 speed:slow(缓慢)normal(正常)fast快速 毫秒值(指定时间)            //    //$('div').show('slow');            //    //$('div').show('normal');            //    //$('div').show('fast');            //    //$('div').show(3000);//3秒时间            //    //3 easing: swing(慢快慢)  linear(匀速)            //    //$('div').show(3000, 'swing');            //    //$('div').show(3000, 'linear');            //    //4 fn()元素在3秒内匀速显示完毕后执行此函数            //    $('div').show(3000, 'linear', function () {            //        //背景色变蓝            //        $('div').css('background-color', 'blue');            //    });            //});            //$('button').click(function () {            //    //隐藏动画            //    $('div').hide(3000, 'linear', function () {            //        $('div').css('background-color', 'red');            //    });            //});            //$('input:last').click(function () {            //    //切换动画            //    $('div').toggle(3000, 'swing');            //});        });        //滑动展开/收缩/切换        $(function () {            ////滑动显示            //$('input:eq(0)').click(function () {            //    $('div').slideDown("slow");            //});            ////滑动隐藏            //$('button').click(function () {            //    $('div').slideUp("slow");            //});            ////滑动切换            //$('input:eq(1)').click(function () {            //    $('div').slideToggle(3000);            //});        });        //淡入/淡出/切换        $(function () {            ////淡入            //$('input:eq(0)').click(function () {            //    $('div').fadeIn("slow");            //});            ////淡出            //$('button').click(function () {            //    $('div').fadeOut("slow");            //});            ////到指定透明度            //$('input:eq(1)').click(function () {            //    $('div').fadeTo(3000,0.6);            //});            ////切换            //$('input:eq(2)').click(function () {            //     $('div').fadeToggle(3000);            //});        });        //自定义动画        $(function () {            //自定义动画            //$('button').click(function () {            //    //鼠标移入移出事件            //    $('div').hover(            //        //鼠标移入 div宽高增长到200            //        function () {            //            $('div').animate({ width: 200, height: 200 }, 3000, 'linear');            //        },            //        //鼠标移出 div恢复默认宽高100            //        function () {            //            $('div').animate({ width: 100, height: 100 }, 3000, 'linear', function () {            //                //div滑动展开            //                $('div').animate({ height: 200 }, 3000, 'linear', function () {            //                    //div滑动收缩            //                    $('div').animate({ height: 100 }, 3000, 'linear', function () {            //                        //div淡出            //                        $('div').animate({ opacity: 0 }, 3000, 'linear', function () {            //                            //div淡入            //                            $('div').animate({ opacity: 1 }, 3000, 'linear', function () {            //                                //div到指定不透明度            //                                $('div').animate({ opacity: 0.6 }, 3000, 'linear', function () {            //                                    $('div').css('backgroundColor', 'blue');            //                                    //alert('div动画执行完毕');            //                                });            //                            });            //                        });            //                    });            //                });            //            });            //        });            //});        });        //例子        $(function () {            $('div').mouseover(function () {                $('div').animate({ width: 100, opacity: 1 }, 1000, 'linear', function () {                    $('div').animate({ height: 200 }, 3000, 'linear');                })            });            $('div').mouseout(function () {                $('div').animate({ height: 100, }, 1000, 'linear', function () {                    $('div').animate({ width: 50, opacity: 0.3 }, 3000, 'linear');                });            });        });    </script></body></html>