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

本篇将总结jQuery特效－－淡入淡出、滑动、停止动画、Chaining（链接技术）在特效中的应用。

淡入淡出

·         fadeIn() 淡入已隐藏的元素

·         fadeOut() 淡出可见元素

·         fadeToggle() 在淡入与淡出之间切换样式

·         fadaTo() 设置渐变过程中的不透明度 (0~1区间)

fadeIn()、fadeOut（）使用

·         fadeIn() 淡入已隐藏的元素 （显示元素）

·         fadeOut() 淡出可见元素 (隐藏元素)

语法结构

·         $(selector).fadeIn(speed,callback);

·         $(selector).fadeOut(speed,callback);

·         speed 可选参数 设置效果的时间 可设定值毫秒、"slow"、"fast"、"normal"

·         callback 可选参数 完成招执行的函数名称，可以是函数名也可以是匿名函数

    <style>
        #div1,#div2,#div3{
            float: left;
            width: 200px;
            height:200px;
            background-color:red;
            text-align: center;
            line-height: 200px;
            display:none;
        }
        #div2{
            background-color:yellow;
        }
        #div3{
            background-color: blue;
        }
    </style>

    <div id="div1">div1-fadeIn()</div>
    <div id="div2">div2-fadeIn("slow")</div>
    <div id="div3">div3-fadeIn(3000)</div>
    </br><button id="btn1" style="display:block;clear: both;">淡入效果(显示)</button></br>
    <button id="btn2">淡出效果(隐藏)</button>
    
    <script>
        $("#btn1").click(function(){
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(3000);
        });
        $("#btn2").click(function(){
            $("#div1").fadeOut();
            $("#div2").fadeOut("slow");
            $("#div3").fadeOut(3000);
        });
    </script>

滑动

·         sideDown() 向下滑动元素 （显示元素）

·         slideUp() 向上滑动元素 （隐藏元素）

·         sideToggle() 在向下和向上的滑动效果中切换

sideDown()、sideUp()、slideToggle()使用

语法结构

·         $(selector).slideDown(speed,callback);

·         $(selector).slideUp(speed,callback);

·         $(selector).slideToggle(speed,callback);

·         speed 可选参数 设置效果的时间 可设定值毫秒、"slow"、"fast"、"normal"

·         callback 可选参数 完成招执行的函数名称，可以是函数名也可以是

    </br>
    <style>
        #div4{
            width: 200px;
            height:200px;
            text-align: center;
            background-color:blue;
            color:red;
            margin-top: 20px;
        }
        #div4 p{
            margin:0px;
            padding:0px;
        }
    </style>
    <div id="div4">
        <p>这是我们演试滑动效果的示例</p>
        <p>我们将展示如何通过slideDwon()和slideUp()</p>
    </div>
    <button id="btn3">slideUp("slow")</button></br>
    <button id="btn4">slideDown("fast")</button></br>
    <button id="btn5">滑动效果切换(5000)</button></br>

    <script>
        $("#btn3").click(function(){
            $("#div4").slideUp("slow");
        });
        $("#btn4").click(function(){
            $("#div4").slideDown("fast");
        });
        $("#btn5").click(function(){
            $("#div4").slideToggle(5000);
        });
    </script>

停止动画

·         stop() 停止动画或效果，在它们执行过程中

语法结构

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

·         stopAll 清除动画队列，默认为false，即仅停止活动的动画，允许任何后加入队列的动画继续执行

·         goToEnd 立即完成动画，默认为false

·         stop()方法会清除被选元素上的当前动画

    </br>
    <button id="btn6">stop()</button></br>
    <button id="btn7">stop(false,True)</button></br>
    <button id="btn8">stop(True,false)</button>
    <script>
        $("#btn6").click(function(){
            $("#div4").stop();
        });
        $("#btn7").click(function(){
            $("#div4").stop(false,true);
        });
        $("#btn8").click(function(){
            $("#div4").stop(true,false);
        });
    </script>

Chaining（链接技术）

·         Chaining被称为链接的技术，允许我们在相同的元素上运行多条jQuery命令，一条接着另一条，通常我们将它用在动效的效果上，减少我们多次查找相同的元素来设置动画效果。

语法结构

·         $(selector).css("color","blue").slideUp(3000).slideDown(3000)

·         换行写法也可运行

$(selector).css("color","blue")
    .slideUp(3000)
    .slideDown(3000)

       </br>
    <button id="btn9">Chaining</button>
    <script>
         $("#btn9").click(function(){
            $("#div4").css("color","white")
                .slideUp(3000)
                .slideDown(3000,function(){$(this).css("color","red")})                
        });       
    </script>

Clallbac函数小结

·         Clallback函数在当前动画100%完成之后才会执行

·         Clallback函数一般用在动画结束后需要执行指令的环境下，js默认是逐行执行代码，动画和后续指令的执行如果同时进行可能会产生错误和冲突，所以建议在有动画和指令都要保证执行效果的情况下使用Clallbac函数

·         Callback即可以是函数名，也可以是匿名函数

·         如果选中n个html元素进行操作，Callback函数会执行n次

·         使用Callbak函数时加上括号，函数将立即执行，并且只会调用一次，如果不加括号，元素显示或隐藏后才开始调用函数，所以就会出现执行n次的情况

·         Callback即可以是函数名，也可以是匿名函数

特效的基本使用总结到此，下一篇将介绍动画用，介绍如何使用animate()方法来自定义动画，我认为这是jQuery特效精化所在，所以放在最后篇幅中介绍。

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

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

zhoubo

2020.8.13 at home