为什么我不能在IE 11或Edge中的数组元素上调用jQuery方法

栏目: 类库 · 发布时间: 2021-04-13

简介  这篇文章主要介绍了为什么我不能在IE 11或Edge中的数组元素上调用jQuery方法以及相关的经验技巧,文章约2520字,浏览量108,点赞数5,值得参考!

我正在尝试使用jQuery.animate为一组<div>元素设置动画。但是当我迭代一个数组时,没有在元素上定义animate方法。这当然适用于chrome。

该数组具有有效的animate方法,但每个元素都没有。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" title="Standard" href="/css/styles.css" type="text/css" media="screen" />

<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script>
    var confettiPlayers = [];

    function makeItRain() {
        var confetti = $(".snow");//document.querySelectorAll('.snow');

        for (var i = 0, len = confetti.length; i < len; ++i) {
            var snowball = confetti[i];

            snowball.innerHTML = '<div class="rotate"><div class="askew"></div></div>';
            var scale = Math.random() * .8 + .2;

            // The next line throws exception on IE11/Edge
            // SCRIPT438: Object doesn't support property or method 'animate'
            var player = snowball.animate([
                    { transform: 'translate3d(' + (i / len * 100) + 'vw,0,0) scale(' + scale + ')', opacity: scale },
                    { transform: 'translate3d(' + (i / len * 100 + 10) + 'vw,100vh,0) scale(' + scale + ')', opacity: 1 }
                ], {
                        duration: Math.random() * 3000 + 3000,
                        iterations: Infinity,
                        delay: -(Math.random() * 5000)
                    });


            confettiPlayers.push(player);

        }
    }

    $(document).ready(function () {
        makeItRain();
    });
</script>
</head>
<body>
    <div class="snowfall">
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
        <div class="snow"></div>
    </div>
</body>
</html>

我在单个元素上测试了animate(),它们工作正常。

答案

在你的代码var snowball = confetti[i];

qazxsw poi是一个qazxsw poi而不是qazxsw poi对象。在IE中不支持snowball方法HTMLElementjQuery

你需要使用HTMLElement,以便snowbal成为HTMLElement#animate对象而不是https://developer.mozilla.org/en-US/docs/Web/API/Element/animate


以上就是本文的全部内容,希望对大家的学习有所帮助,版权归原作者或者来源机构所有,感谢作者,如果未能解决你的问题,请参考以下文章。

当ajax目标是localhost时,IE 10和11中的访问被拒绝

【续】抓个Firefox的小辫子,jQuery表示不背这黑锅,Chrome,Edge,IE8-11继续围观中

框中的IE7元素不能正确浮动

Display:在ie11中的弹性容器上的元素之前

Javascript - forEach()循环不能在IE11上运行(示例代码)