为什么我的自定义伪动画与jQuery'的原生动画功能

因此，虽然您可以通过jQuery UI设置元素的background-color的动画，但对于使用background: linear-gradient()函数的元素，您不能在将其渲染为图像时执行同样的操作-但是，您可以使用jQuery的.css()方法设置线性梯度。

因此，这个问题的一个简单解决方案是创建一个伪动画，通过css方法在特定的持续时间内快速设置10-30毫秒的线性梯度。使用此功能，您实际上可以创建线性渐变动画。下面是一个例子。

我确实做到了，但我遇到了一个问题。在为线性渐变设置动画的同时，我还通过原生jQuery animate()方法为具有相同开始值和结束值的另一种背景颜色设置动画，尽管将持续时间指定为相等，但这些动画不会同时执行。

线性渐变动画是在原生jQuery动画之后开始和完成的，尽管在我的代码早期（大约4行）实际上稍微调用了。

// Call to custom linear gradient animation
animateGradient(RGBstartColor, RGBstopColor, 300);
...
// Native jQuery animation
$('#stage').animate({ backgroundColor: RGBstopColor }, 300, 'linear');

我想知道这是否是一个伪装成时间问题的宽松问题，但即使在jQuery anim上指定宽松，它仍然可见。

这是我的animateGradient():代码

    animateGradient = function(startString, stopString, duration) {
        // Convert an rgb() string to an array: [r, g, b]
        RGBStringToArray = function(string) {
            return string.substring(4, string.length-1).replace(/ /g, '').split(',')
        }
        // The looping function where the magic happens
        animationLoop = function() {
            diff = [parseInt(start[0]) + (diffStep[0] * i), parseInt(start[1]) + (diffStep[1] * i), parseInt(start[2]) + (diffStep[2] * i)];
            var diffString = 'rgb(' + Math.round(diff[0]) + ',' + Math.round(diff[1]) + ',' + Math.round(diff[2]) + ')';
            $('#serratedtop').css({ 
                background: 
                'linear-gradient(-45deg, ' + diffString + ' 12px, transparent 0), linear-gradient(45deg, ' + diffString + ' 12px, transparent 0)' 
            });
            setTimeout(function() {
                if (i <= iCount) {
                    animationLoop();
                }
                i++;
            }, 30);
        }
        var start = RGBStringToArray(startString);
        var stop = RGBStringToArray(stopString);
        var diff = [stop[0] - start[0], stop[1] - start[1], stop[2] - start[2]];
        var i = 0;
        var iCount = parseInt(duration / 30); // 30 milliseconds should be enough to render a high enough framerate (~ 33fps). 
        var diffStep = [diff[0] / iCount, diff[1] / iCount, diff[2] / iCount];
        // Call the magic 
        animationLoop();
    }

然而，当这个函数运行时，它是有效的，但它显然与原生jQuery anim不同步。有什么想法吗？

JSFiddle演示问题