Javascript 使用jquery设置背景渐变-jshint错误

我正在尝试使用jQuery设置背景渐变动画，如下所示：

this.$next.css('line-indent', 0).animate({
    'line-indent': 100
}, {
    "duration": 750,
    "step": function(value) {
        $(this).css({
            "background": color,
            "background": "moz-radial-gradient (50% 50%, ellipse cover, transparent " + value + "%, " + color + " " + value + "%))",
            "background": "-webkit-radial-gradient(50% 50%, circle, transparent " + value + "%, " + color + " " + value + "%)",
            "background": "radial-gradient(circle at center, transparent " + value + "%, " + color + " " + value + "%)"
        })
    },
    "easing": 'easeInQuint',
    "complete": function() {
        $(this).css({
            "transition": 'none',
            "background": color,
            "background": "moz-radial-gradient (50% 50%, ellipse cover, transparent 0%, " + color + " 0%)",
            "background": "-webkit-radial-gradient(50% 50%, circle, transparent 0%, " + color + " 0%)",
            "background": "radial-gradient(circle at center, transparent 0%, " + color + " 0%)",
            "width": 0
        })
        self.$loader.fadeIn(0);
    }
});

---

这正是我想要的工作方式，除了当我尝试为生产构建dist文件时，jshint为

background

属性抛出一个

replicate key

错误，这是有意义的。我的问题是，如何在为所有不同的浏览器设置背景渐变时防止此错误？

jsHint是正确的，因为您的代码有缺陷。每次在对象中定义

background

键时，都会覆盖该键，因此只会指定最终值。我只能假设它适用于您，因为

径向渐变

适用于您测试的浏览器

以下是您遇到的问题的演示：

var foo=函数（o）{
Object.keys（o）.forEach（函数（key）{
console.log（key）；//注意，只有1个键被覆盖时显示
})
console.log（o.background）；//显示最后一个值
}
福({
“背景”：“红色”，
“背景”：“莫兹径向梯度（50%50%，椭圆覆盖，透明100%，红色5%）”，
“背景”：“-webkit径向梯度（50%50%，圆形，透明100%，红色5%）”，
“背景”：“径向梯度（中心圆圈，透明100%，红色5%）”
})

jsHint是正确的，因为您的代码有缺陷。每次在对象中定义

background

键时，都会覆盖该键，因此只会指定最终值。我只能假设它适用于您，因为

径向渐变

适用于您测试的浏览器

以下是您遇到的问题的演示：

var foo=函数（o）{
Object.keys（o）.forEach（函数（key）{
console.log（key）；//注意，只有1个键被覆盖时显示
})
console.log（o.background）；//显示最后一个值
}
福({
“背景”：“红色”，
“背景”：“莫兹径向梯度（50%50%，椭圆覆盖，透明100%，红色5%）”，
“背景”：“-webkit径向梯度（50%50%，圆形，透明100%，红色5%）”，
“背景”：“径向梯度（中心圆圈，透明100%，红色5%）”
})