jquery动画，基础以及我发现的新大陆

Posted 2020-08-16 webNick

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery动画，基础以及我发现的新大陆相关的知识，希望对你有一定的参考价值。

$.animate()在jquery官方介绍有2中方式，其实我发现的新大陆也是第二种方式的扩展！

一、$.animate( properties [, duration ] [, easing ] [, complete ] )

参数介绍（[]包裹的参数可省略）

properties

　　类型: PlainObject

　　一个CSS属性和值的对象,动画将根据这组对象移动。
duration (默认: 400)

　　类型: Numberor String

　　一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"，三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
easing (默认: swing)

　　类型: String

　　一个字符串，表示过渡使用哪种缓动函数。（注：jQuery自身提供"linear" 和 "swing"）。

　　　　这个速度函数可以自定义，后面有介绍。

complete

　　类型: Function()

　　在动画完成时执行的函数。

举2个例子吧！

示例代码：

$(".btn2").click(function(){
        $("#btn2").animate({height:"300px"},2000,‘swing‘,function(){alert(‘hello world‘)});
    });

示例代码：

$(".btn1").click(function(){
     $("#btn1").animate({height:"300px"});
});

　　以上2种效果为方式一的动画效果，也是常用的jquery动画。

二、$.animate( properties, options )

参数介绍：

properties

类型: PlainObject

一个CSS属性和值的对象,动画将根据这组对象移动。
options

类型: PlainObject

一组包含动画选项的值的集合。支持的选项:
- duration (default: 400)
  
  Type: Numberor String
  
  一个字符串或者数字决定动画将运行多久。（愚人码头注：默认值: "normal"，三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
- easing (default: swing)
  
  Type: String
  
  一个字符串，表示过渡使用哪种缓动函数。（愚人码头注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件）
- queue (default: true)
  
  Type: Boolean or String
  
  一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用.dequeue("queuename")来启动它。
- specialEasing
  
  Type: PlainObject
  
  由此方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map。( 1.4 新增)
- step
  
  Type: Function( Number now, Tween tween )
  
  每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
- progress
  
  Type: Function( Promiseanimation, Numberprogress, NumberremainingMs )
  
  每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。 (version added: 1.8)
- complete
  
  Type: Function()
  
  在动画完成时执行的函数。
- done
  
  Type: Function( Promiseanimation, BooleanjumpedToEnd )
  
  在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)
- fail
  
  Type: Function( Promiseanimation, BooleanjumpedToEnd )
  
  动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)
- always
  
  Type: Function( Promise animation, Boolean jumpedToEnd )
  
  在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: 1.8)

这里有2个参数的应用要单独说明一下：

Step Function

第二个版本的.animate()提供了一个step选项- 每步动画执行后调用的回调函数。启用自定义动画类型或改变正在执行的动画，此功能是非常有用。它接受两个参数（now 和 fx），this是当前正在执行动画的DOM元素集合。

now: 每一步动画属性的数字值
fx: jQuery.fx 原型对象的一个引用，其中包含了多项属性，比如elem 表示前正在执行动画的元素，start和end分别为动画属性的第一个和最后一个的值，prop为进行中的动画属性。

Easing（缓动）

.animate()还有一个参数是一个字符串命名的使用缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。在jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画，请调用 linear. 更多的缓动函数要使用的插件，或者自定义。

直接上代码：

$(‘#clickme‘).click(function() {
        $(‘#test‘).animate({
            width: ‘toggle‘,
            height: ‘toggle‘
        }, {
            duration: 5000,
            specialEasing: {
                width: ‘linear‘,
                height: ‘swing‘
            },
            complete: function() {
                $(this).after(‘<div>Animation complete.</div>‘);
            }
        });
    });

现在新大陆来了！

jQuery.easing = {
        linear: function( p ) {
            return p;
        },
        swing: function( p ) {
            return 0.5 - Math.cos( p * Math.PI ) / 2;
        }
    };

　　这是jquery里animate的Easing源码！如果你觉得就linear和swing不能满足你的要求了，咋们可以扩展一些速度函数。

jQuery.extend(jQuery.easing, {
        easeOutBounce: function (x, t, b, c, d) {
            console.log(x);//0-1
            console.log(t);//0-2500
            console.log(b);//0
            console.log(c);//1
            console.log(d);//2500
//            return t/1000;
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },easeOutCubic: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
//            return x;
        }
    })

　　现在Easing的值就多了2个选择：easeOutBounce和easeOutCubic。（不要问我这算法的问题，呵呵，我也是百度的！）

来，上代码试试看看咯！

$(‘.new‘).click(function() {
        var ele = $("#new");
        ele.css({ "left": "0", "top": "0", "transform": "rotateZ(0deg)" });
        $({ left: 0, top: 0, tran: 0 }).animate({
            left: 800, top: 180, tran:360
        }, {
            duration: 2500,
            specialEasing: {
                left: ‘easeOutCubic‘,
                top: ‘easeOutBounce‘
            },
            step: function () {
                console.log(this.left);
                ele.css({ "left": this.left + "px", "top": this.top + "px", "transform": "rotateZ(" + this.tran + "deg)" });
            },
            complete: function () {
                console.log(this.left);
                ele.css({ "left": "800px", "top": "180px", "transform": "rotateZ(360deg)" });
            }
        });
    });

　　这种写法真是第一次见，就忍不住自己试了试，感觉还可以，就想写出来分享给大家！　　

其实就是自定义了一个动画速度函数！

我把本地的测试效果都移除了，还是把完整代码附给大家试试吧！

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>nick jq animate</title>
</head>
<body >
<button class="reset">重置样式</button>
<div id="btn1" class="nick" style="background-color:aqua;"><button class="btn1">btn1</button></div>
<div id="btn2" class="nick" style="background-color:#eee;"><button class="btn2">btn2</button></div>
<div id="test" class="nick"><button id="clickme">clickme</button><button class="btn2">btn2</button></div>
<div id="new" class="nick" style="width:200px;height:100px;background-color:cadetblue;position:absolute;"><button class="new">clickme</button></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
    $(".btn1").click(function(){
        $("#btn1").animate({height:"300px"});
    });

    $(".btn2").click(function(){
        $("#btn2").animate({height:"300px"},2000,‘swing‘,function(){alert(‘hello world‘)});
    });

    $(‘#clickme‘).click(function() {
        $(‘#test‘).animate({
            width: ‘toggle‘,
            height: ‘toggle‘
        }, {
            duration: 3000,
            specialEasing: {
                width: ‘linear‘,
                height: ‘swing‘
            },
            complete: function() {
                $(this).after(‘<div>Animation complete.</div>‘);
            }
        });
    });

    $(‘.new‘).click(function() {
        var ele = $("#new").stop(true, false);
        ele.css({ "left": "0", "top": "0", "transform": "rotateZ(0deg)" });
        $({ left: 0, top: 0, tran: 0 }).animate({
            left: 800, top: 180, tran:360
        }, {
            duration: 2500,
            specialEasing: {
                left: ‘easeOutCubic‘,
                top: ‘easeOutBounce‘
            },
            step: function () {
                console.log(this.left);
                ele.css({ "left": this.left + "px", "top": this.top + "px", "transform": "rotateZ(" + this.tran + "deg)" });
            },
            complete: function () {
                console.log(this.left);
                ele.css({ "left": "800px", "top": "180px", "transform": "rotateZ(360deg)" });
            }
        });
    });
    jQuery.extend(jQuery.easing, {
        easeOutBounce: function (x, t, b, c, d) {
            console.log(x);//0-1
            console.log(t);//0-2500
            console.log(b);//0
            console.log(c);//1
            console.log(d);//2500
//            return t/1000;
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },easeOutCubic: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
//            return x;
        }
    })


    $(‘.reset‘).click(function(){
        $(".nick").css({ height:"" });
    });
</script>
</body>
</html>

个人能力有限，只能写到这里了，希望对大家有所帮助，还望大家多多评论，指教！

以上是关于jquery动画，基础以及我发现的新大陆的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 将 div 切片成动画片段

几个非常实用的JQuery代码片段

在jquery中切换动画

十条jQuery代码片段助力Web开发效率提升

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段