自定义-CSDN博客

本文链接：https://blog.csdn.net/weixin_44552244/article/details/90259428

开发工具与关键技术：Visual Studio / 自定义动画
作者：郑名方
撰写时间：2019年5月15日

下面这些函数用于创建jQuery中所没有的各种特效。

函数	描述
.animate()	根据一组CSS属性，执行自定义动画。
.clearQueue()	从来列队中移除所有未执行的顶。
.delay()	设置一个延时来推迟执行队列中后续的项。
.finish()	停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
jQuery.fx.interval	该动画的频率（以毫秒为单位）。
jQuery.fx.off	全局的禁用所有动画。
.queue()	显示在匹配的元素上的已经执行的函数列队。在匹配元素上操作已经附加函数的列表。
.stop()	停止匹配元素当前正在运行的动画。

操作一个元素执行3秒钟的淡入动画，对比2组动画设置的区别，显而易见，animate方法相比之前的方法更加灵活，可以精确的控制样式属性从而执行动画。Animate语法的参数说明.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了
参数分解：
properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，除非用插件，否则正常情况下是不能只用动画效果的。注意，CSS 样式使用 DOM 名称（比如 “fontSize”）来设置，而非 CSS 名称（比如 “font-size”）。
特别注意：单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用
.animate({left:50,width:’50px’,opacity:’show’,fontSize:”10em”,}500);
除了定义数值，每个属性能使用‘show’,’hide’和’toggle’。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示和隐藏。
duration时间：动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供’fast’ 和 'slow’字符串，分别表示持续时间为200 和 600毫秒。easing动画运动的算法：jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件。complete回调：动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发。
当.clearQueue()方法被访问的时候，所有在这个列队中未执行的函数将被移除。当不使用参数的时候，.clearQueue()会从标准的动画队列fx中移除剩下的函数。这个方法类似.stop(true)。然而.stop()方法只适用在动画中。.clearQueue()还可以用来移除用.queue()方法添加到普通jQuery列表的任何函数。
在动画执行过程中是允许被暂停的，当元素调用.stop()方法，当前正在运行的动画立即停止，.stop():停止当前动画，通过暂停处在停止的动画继续运行，要等到第一个动画停止第二个第三个才继续；.stop(true):如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行，停止第一个、第二个和第三个动画；.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值，停止动画，直接跳到第一个电话的最终状态。
下面的代码来源是老师上课。

  <style>
        body {
            padding:20px 100px;
            font-size:16px;
        }
        p {
            font-size:24px;
            color:red;
        }
        .demo {
            width:300px;
            height:200px;
            margin:30px;
            background:#b287e2;
            color:#fff;
        }
        select, button {
            padding:4px 8px;
        }
        .demo1 {
            width:400px;
            height:200px;
            background:#d9b9fc;
        }
    </style>
</head>
<body>
    <p style=""> $(elem).fadeOut(3000)  $(elem).animate({opacity:0},3000) </p>
   <div>
       <h2>animate</h2>
       <div class="demo">内部动画</div>
       点击观察动画效果：
       <select id="cboStart">
           <option value="1">动画1</option>
           <option value="2">动画2</option>
           <option value="3">动画3</option>
           <option value="4">动画4</option>
       </select>
       <button id="btnAnimation">执行动画</button>
   </div>
    <div>
        <h2>stop</h2>
        <div class="demo1">内部动画</div>
        点击观察动画效果：
        <select id="cboStop">
            <option value="1">stop()</option>
            <option value="2">stop(true)</option>
            <option value="3">stop(true,true)</option>
        </select>
        <button id="btnStart">设置动画</button>
        <button id="btnStop">停止动画</button>
    </div>
    <div style="height:200px;"></div>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
    <script>
       //执行动画按钮的点击事件
        $("#btnAnimation").click(function () {
            var value = $("#cboStart").val();
            var $demo = $(".demo");
            if (value=="1") {
                $demo.animate({
                    // 数值的单位默认是px
                    width: 350,
                    height: 300,
                },3000);//$demo设置高度300px,宽度300px,执行动画时间3s
            } else if (value=="2") {
                $demo.animate({
                    //在现有宽度的基础上增加100px,高度减少100px
                    width: "+=100px",
                    height:"-=100px"
                });
            } else if (value == "3") {
                $demo.animate({
                    fontSize:"4.5em"
                }, 3000, function () {
                    alert("动画 fontSize执行完毕!");
                });
            } else if (value=="4") {
                //通过toggle参数切换高度
                $demo.animate({
                    width: "toggle",
                    height:"toggle"
                });
            }
        });
    //设置动画按钮的点击事件
        $("#btnStart").click(function () {
            $(".demo1").animate({
                height:300
            },5000);
            $(".demo1").animate({
                width: 300
            },5000);
            $(".demo1").animate({
                opacity: 0.3
            },2000);
        });
        //停止动画按钮的点击事件
        $("#btnStop").click(function () {
            var value = $("#cboStop").val();
            var $demo = $(".demo1");
            if (value=="1") {
                //当前当前动画
                $demo.stop()
            } else if (value == "2") {
                //停止所以队列
                $demo.stop(true)
            } else if (value == "3") {
                //停止动画，直接跳到当前动画的结束
                $demo.stop(true, true);
            }
        });