简单的Jquery函数在IE上无法正常工作

Question

简单的Jquery函数在IE上无法正常工作

3

我正在开发网站，现在需要让它在各种浏览器上运行。所以我有了这段代码。

<script>    
var colors = new Array(
                [62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]);

            var step = 0;
            //color table indices for: 
            // current color left
            // next color left
            // current color right
            // next color right
            var colorIndices = [0, 1, 2, 3];

            //transition speed
            var gradientSpeed = 0.002;

            function updateGradient() {

                if ($ === undefined) return;

                var c0_0 = colors[colorIndices[0]];
                var c0_1 = colors[colorIndices[1]];
                var c1_0 = colors[colorIndices[2]];
                var c1_1 = colors[colorIndices[3]];

                var istep = 1 - step;
                var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
                var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
                var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
                var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")";

                var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
                var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
                var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
                var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")";

                $('#gradient').css({
                    background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))"
                }).css({
                    background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"
                });

                step += gradientSpeed;
                if (step >= 1) {
                    step %= 1;
                    colorIndices[0] = colorIndices[1];
                    colorIndices[2] = colorIndices[3];

                    //pick two new target color indices
                    //do not pick the same as the current one
                    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;
                    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length;

                }
            }

            setInterval(updateGradient, 10);
</script>
<style>
    #gradient {
                width: 100%;
                height: 800px;
                padding: 0px;
                margin: 0px;
            }
</style>
<body id="gradient" style="height:90vh; opacity:0">
</body>

我使用了一份jQuery的min库。在Firefox、Chrome、甚至Microsoft Edge和Safari中，一切都运行良好。难道是IE不支持jQuery吗？

- Pwan

检查了IE上的控制台吗？有列出任何特定的错误或问题吗？ - vivekkupadhyay

没有什么东西。但奇怪的是它支持jQuery的点击事件。 - Pwan

是因为我使用了WebKit吗？但如果是这样，它如何在MS Edge上工作呢？ - Pwan

这是因为你只添加了webkit渐变和moz渐变，尝试添加线性渐变即可：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient - Pete

你使用的是哪个版本的IE浏览器？如果是IE8或以下版本，它将无法正常工作。 - Md. Tazbir Ur Rahman Bhuiyan

它是用于版本9的，即IE 9。 - Pwan

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vins · Answer 1

@pwan，你的 JavaScript 看起来很好。唯一的问题是 vh 单位。

尝试为 #gradient div 指定高度为 px。

请查看http://caniuse.com/#search=vh。

- vivekkupadhyay · Answer 2

您需要在您的javascript中添加IE10及以上版本的Gradient支持，如下所示：

$('#gradient').css({
background: "linear-gradient(to right, " + color1 + " 0%, " + color2 + " 100%)"}).css({
background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))" }).css({ background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)"});

对于IE浏览器，CSS3规则将如下所示，用于Gradient：

background: linear-gradient(to right, rgb(234, 35, 115) 0%, rgb(255, 31, 115) 100%);

这里有一个工作的Codepen，可以更好地理解。

关于浏览器支持和更好的解释，您可以参考此网址

CSS3-gradients

渐变在IE10以下版本上无法工作，因此您必须使用替代方案，例如：

  /* Fallback (could use .jpg/.png alternatively) */
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg);