The following are the summary of MOOC online courses https://www.imooc.com/video/3179

eg1: element attribute value with px

        // Think about whether you can use the binomial operator to say a sentence directly
        function getStyle(obj, attr) {
            // IE
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }

        // obj: object to implement animation; attr: attribute to implement animation; target: final value of attribute animation
        function animate(obj, attr, target) {
            // Prevent consecutive move in elements from generating multiple timers, so clear before entering
            clearInterval(timer);
            obj.timer = setInterval(function() {
                // Property current value
                var icur = parseInt(getStyle(obj, attr));
                // Speed of animation
                var speed = (target - icur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (icur == target) {
                    clearInterval(obj.timer);
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }, 30);
        }

eg2: in addition to eg1, it also includes the animation of opacity, which can basically satisfy the animation of most situations. For example, z-index can supplement itself

        // Think about whether you can use the binomial operator directly
        function getStyle(obj, attr) {
            // IE
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }

        // obj: object to implement animation; attr: attribute to implement animation; target: final value of attribute animation
        function animate(obj, attr, target) {
            // Prevent consecutive move in elements from generating multiple timers, so clear before entering
            clearInterval(timer);
            obj.timer = setInterval(function() {
                // Property current value
                var icur = 0;
                if (attr == 'opacity') {
                    // In this case, Math.round() is used to prevent the data from jittering near the target value, because there is an error in the calculation of floating-point numbers
                    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }
                // Speed of animation
                var speed = (target - icur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                // Detection stop
                if (icur == target) {
                    clearInterval(obj.timer);
                } else {
                    if (attr == 'opacity') {
                        // IE
                        obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                        // Non IE
                        obj.style.opacity = (icur + speed) / 100;
                    } else {
                        obj.style[attr] = icur + speed + 'px';
                    }
                }
            }, 30);
        }

If you want to realize the chain motion (not the chain call here), that is, to start the animation of the next attribute after the completion of one attribute animation, you only need to add a parameter -- callback function in the above code

The call method is as follows

The above method can't make one element do multiple animations at the same time, that is, the animation effect of jquery. Let's implement it

        // Think about whether you can use the binomial operator to say a sentence directly
        function getStyle(obj, attr) {
            // IE
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }

        // obj: object to implement animation; json: attribute and attribute final value to implement animation; fn: callback function
        function animate(obj, json, fn) {
            // Prevent consecutive move in elements from generating multiple timers, so clear before entering
            clearInterval(timer);
            // Indicates whether the animation of all attributes has been completed. true indicates that all attributes have been completed
            var flag = true;
            obj.timer = setInterval(function() {
                flag = true;
                for (var attr in json) {
                    // Property current value
                    var icur = 0;
                    if (attr == 'opacity') {
                        // In this case, Math.round() is used to prevent the data from jittering near the target value, because there is an error in the calculation of floating-point numbers
                        icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        icur = parseInt(getStyle(obj, attr));
                    }
                    // Speed of animation
                    var speed = (json[attr] - icur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    // Detect that the flag is set to false as long as the attribute is not completed
                    if (icur != json[attr]) {
                        flag = false;
                    }

                    // It's extracted here, because when icur == json[attr], speed=0, so the following values will not affect. According to the logic, it should be written in the above if statement
                    if (attr == 'opacity') {
                        // IE
                        obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
                        // Non IE
                        obj.style.opacity = (icur + speed) / 100;
                    } else {
                        obj.style[attr] = icur + speed + 'px';
                    }

                }
                if (flag) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            }, 30);
        }