Question

我正在尝试使用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会为duplicate key属性抛出background错误，这是有道理的。我的问题是，如何在为所有不同浏览器设置背景渐变时防止此错误？

Answer 1

jsHint是正确的，因为您的代码存在缺陷。每次在对象中定义时，都会覆盖background键，因此只会分配最终值。我只能假设它适合您，因为radial-gradient适用于您测试的浏览器。

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

＆＃13;

var foo = function(o) {
    Object.keys(o).forEach(function(key) {
        console.log(key); // note only 1 key is shown as it's overwritten
    })
    
    console.log(o.background); // shows the last value
}

foo({
    "background": 'red',
    "background": "moz-radial-gradient (50% 50%, ellipse cover, transparent 100%, red 5%))",
    "background": "-webkit-radial-gradient(50% 50%, circle, transparent 100%, red 5%)",
    "background": "radial-gradient(circle at center, transparent 100%, red 5%)"
})

＆＃13;

要解决此问题，您需要调用attr()并将样式直接应用于元素。 css()无法使用，因为每次调用它时都会覆盖background属性。

var style = [
    "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 + "%)"
].join(';');

$(this).attr('style', style);

我承认它很丑陋，但没有真正的替代方案

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

1 个答案: