【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之特效篇(3)

本篇将总结jQuery特效－－使用animate()方法来自定义动画特效、轮播图片切换时左右滑动的特效示例。

动画

• animate() 创建自定义动画效果

语法结构

• $(selector).animate({params},speed,callback);

• params 必选参数，定义动画效果的CSS属性

• speed 可选参数，定义动画效果的时长，可取值为毫秒、"slow"、"fast"、"normal"

• callback 可选参数，定义动画效果结束后执行的函数名称，它可以是函数名称和匿名函数

• 现在我们定义一个小动画效果，将一个方块向左移动

• 默认情况下html元素出现在正常流中(正常流中会忽略left、right、bottom、top和z-index声明|)，如果要对元素位置进行操作，首先得设置元素的position属性为relative、absolute、fixed这三个其中一个。

    <style>
        #div1{
            width:200px;
            height: 200px;
            border:1px solid black;
            background-color:blue;
            position:absolute;
            color:white;
            line-height:200px;
            text-align:center;
        }
        #div0{
            position: relative;
            display:block;
        }
    </style>
 
    <div id="div0">
        <button id="btn1">开始动画(单属性)</button>
        <button id="btn2">开始动画(多属性)</button>
        <button id="btn3">开始动画(top && width += 50)</button>
    </div>
 
    <script>
        $("#btn1").click(function(){
            $("#div1").animate({
                left:'200px'                             
            });
        });
        $("#btn2").click(function(){
            $("#div1").animate({
                left:'200px',
                width:'350'                             
            });
        });
        $("#btn3").click(function(){
            $("#div1").animate({
                top:'+=50px',
                width:'+=50px'                             
            });
        });
    </script>
 
    <div id="div1">将一个方块向左移动200px</div>

• animate() 操作多个属性

以对象多个属性名的方式来设置多个属性

    <div id="div0">
        <button id="btn2">开始动画(多属性)</button>
    </div>
    
    <script>
        $("#btn2").click(function(){
            $("#div1").animate({
                left:'200px',
                width:'350'                             
            });
        });
    </script>

• animate()操作CSS属性注意事项

• 必须使用Camel(驼峰拼写)拼写法来写CSS属性，css属性padding-left要写成paddingLeft，margin-right写成marginRight等

• animate() 使用运算符

支持 +=、-=这样的运算符

    <div id="div0">
        <button id="btn3">开始动画(top && width += 50)</button>
    </div>
    
    <script>
        $("#btn3").click(function(){
            $("#div1").animate({
                top:'+=50px',
                width:'+=50px'                             
            });
        });
    </script>

• animat() 使用动画值

• "show" 为指定的css属性添加 显示效果

• "hide" 为指定的css属性添加 隐藏效果

• "toggle" 为指定的css属性添加 在显示和隐藏之间切换的效果

    <div id="div0">
        <button id="btn4">开始动画(动画值)</button>
    </div>
 
    <script>
        $("#btn4").click(function(){
            $("#div1").animate({
                top:'+=50px',
                right:'toggle'
            });
        });
    </script>

• animate() 动画队列

前面我们都单个动画效果，动画队列相关于可以设置一组动画，我们只需要编写多个animate()方法 jQuery会将animate方法组成队列，然后逐一执行动画。

    <div id="div0">
        <button id="btn5">开始动画(动画队列-一组动画后淡出 && 淡入)</button>
    </div>
 
    <script>
        $("#btn5").click(function(){
            var animateDiv = $("#div1");
            animateDiv.animate({height:'300px',opacity:'0.5'},'slow');
            animateDiv.animate({width:'300px',opacity:'1'},'slow');
            animateDiv.animate({height:'200px',opacity:'0.5'},'slow');
            animateDiv.animate({width:'200px',opacity:'1'},'slow');
            animateDiv.animate({fontSize:'28px'},'slow'); //放大文本
            animateDiv.fadeOut(3000).fadeIn('slow');   //淡出、淡入 链接效果
        });
    </script>

• animate() 写个轮播图左右切换特效

总结完上面的练习，对于轮播图的实现相信大家心中也有了思路,以下是我写的一个轮播图片切换时左右滑动的特效示例

    <style>
        #btn6{
            position: relative;
            margin: 10px;
        }
        #lunbo{
            position: relative;
        }
    </style>
    <button id="btn6">轮播图-向左淡出</button>
    <button id="btn7">轮播图-向右淡出</button>
 
    <div id="lunbo">
        <div id="div4" style="width:400px;height:200px;background-color: red;position: absolute;z-index: 2;"></div>
        <div id="div5" style="width:400px;height:200px;background-color: yellow;position: absolute;z-index: 1;"></div>
    </div>
    <script>
        $("#btn6").click(function(){
            var lunboDiv4 = $("#div4");
            lunboDiv4.animate({left:'0px',width:'hide',opacity:'0.5'},3000);
        });
        $("#btn7").click(function(){
            var lunboDiv5 = $("#div5");
            lunboDiv5.animate({left:'400px',width:'hide',opacity:'0.5'},3000);
        });
    </script>

特效篇总结就告一段落了，相信大家已经熟悉了jQuery特效的应用,但是如果想取得更好的学习效果,建议大家自己动手用jQuery写一个轮播图的网页。

实例代码已上传我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/jQuery

书山有路勤为径，学海无涯苦作舟!!!

zhoubo

2020.8.15 at home