Javascript 为什么我的自定义伪动画与jQuery'；s的本机动画功能？

因此，虽然您可以通过jQuery UI设置元素的

背景色

的动画，但对于使用

背景：linear-gradient（）

函数作为图像渲染的元素，您不能这样做-但是，您可以使用jQuery的

.css（）

方法设置线性渐变

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

我确实做到了这一点，但我遇到了一个问题。在设置线性渐变动画的同时，我还通过本机jQuery

animate（）

方法设置另一种具有相同起始值和结束值的背景颜色的动画，并且这些动画不会同时执行，尽管将两者的持续时间指定为相等

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

我想知道这是否是一个伪装成时间问题的缓解问题，但即使在jQuery动画中指定缓解，它仍然是可见的

这是我的

animateGradient（）

代码：

animateGradient=函数（开始字符串、停止字符串、持续时间）{
//将rgb（）字符串转换为数组：[r，g，b]
RGBStringToArray=函数（字符串）{
返回string.substring（4，string.length-1）.replace（//g'，）.split（'，'））
}
//魔术发生的循环函数
animationLoop=函数（）{
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（{
背景：
“线性渐变（-45度，+diffString+'12px，透明0），线性渐变（45度，+diffString+'12px，透明0）”
});
setTimeout（函数（）{
如果（i为了避免不同系统以不同方式（或不同速度）计算更改的问题，可以使用animate的
步骤
回调来简化整个过程，然后从动画颜色中“窃取”值：

$('#stage').animate({
    backgroundColor: 'rgb(230,250,250)'
}, {
    duration: 1000,
    step: function () {
        var col = $('#stage').css('backgroundColor');
        $('#serratedtop').css({
            background:
            'linear-gradient(-45deg, ' + col + ' 12px, transparent 0), linear-gradient(45deg, ' + col + ' 12px, transparent 0)'
        });
    }
});

这样，它们将始终保持同步，因为每次值更改时都会回调这些步骤

jsFIDLE:
背景位置：左下；
@avrilalejandro抱歉？我不理解相关性…我不确定，但这可能是一个增量时间问题吗？动画的执行会增加动画制作所用的时间吗？看看这个：。它用requestAnimationFrame制作背景渐变动画，其中requestAnimationFrameh非常有效。整合背景颜色也很容易。由于基于跨浏览器兼容性的setTimeout，所以
.animate（）
方法并不完全准确。
    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();
    }

$('#stage').animate({
    backgroundColor: 'rgb(230,250,250)'
}, {
    duration: 1000,
    step: function () {
        var col = $('#stage').css('backgroundColor');
        $('#serratedtop').css({
            background:
            'linear-gradient(-45deg, ' + col + ' 12px, transparent 0), linear-gradient(45deg, ' + col + ' 12px, transparent 0)'
        });
    }
});