Question

我在某些路径上有一个ID效果的bodymovin.js SVG动画（附图像）。我已经在这些（<script> $(function() { document.getElementById("replay").onclick = function () { location.href = "www.yoursite.com"; }; }); </script>）上放了一些css样式，它们运行正常但是使用jquery onClick进行重定向似乎不起作用。有什么想法吗？

动画本身处于叠加状态，按下按钮后开始。

重定向代码：

<script>
$( ".animation" ).click(function() {
    var anim;
    var elem = document.getElementById('bodymovin_overlay')
    var animData = {
        container: elem,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        rendererSettings: {
            progressiveLoad:false
        },
        path: 'data_overlay.json'
    };
    anim = bodymovin.loadAnimation(animData);
});
</script>

动画代码：

 select * from table_name where position('A grammatical unit that is' in field_name) > 0 or position('grammatical unit that is syntactically' in stradacstm) > 0 or position('unit that is syntactically independent' in stradacstm) > 0;

此外还附有图片：

Answer 1

从document.getElementById删除＃（＆＃34; #repyy＆＃34;）。

使用document.getElementById（＆＃34;重播＆＃34;）（原生JS）或通过jQuery $（＆＃39; #repyy＆＃39;）

Answer 2

我相信错误的发生是因为您忘记添加分号。

var elem = document.getElementById('bodymovin_overlay')

到

var elem = document.getElementById('bodymovin_overlay');

Answer 3

问题解决了 - 叠加层覆盖了动画z-index，必须给它一个比叠加层更高的z索引。

Answer 4

最终代码有效，希望它可以帮助某人：

    var lookingForLinks = true;
    setTimeout(addLinksToSvgAnim, 1000);

    function addLinksToSvgAnim() {
        if (lookingForLinks) {
            let medicalG = document.getElementById("medical");
            let foodG = document.getElementById("food");
            let collabG = document.getElementById("collab");
            let volunteersG = document.getElementById("volunteers");
            let projectsG = document.getElementById("projects");
            let replayG = document.getElementById("replay");

            if (medicalG && foodG && volunteersG && projectsG) {
                lookingForLinks = false;
                medicalG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/medical-aid";
                });
                foodG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/humanitarian-aid";
                });
                collabG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/our-story/partners";
                });
                volunteersG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/get-involved";
                });
                projectsG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/bringhope-projects";
                });
                replayG.addEventListener("click", function () {
                    window.location = window.location.protocol + "//" + window.location.hostname + "/bringhope-projects";
                });
            }
            setTimeout(addLinksToSvgAnim, 1000);
        }
    }

Onclick后效果动画（bodymovin.js）ID没有任何反应

4 个答案: