Onclick後效果動畫（bodymovin.js）ID沒有任何反應

我有一個後續效果bodymovin.js SVG動畫與ID在某些路徑（圖片附加）。我在這些（cursor:pointer）上放了一些CSS樣式，這很好，但使用jQuery onClick重定向似乎沒有工作。任何想法爲什麼？Onclick後效果動畫（bodymovin.js）ID沒有任何反應

動畫本身位於按鈕按下後開始的疊加。

重定向代碼：

<script> 
    $(function() { 
     document.getElementById("replay").onclick = function() { 
     location.href = "www.yoursite.com"; 
    }; 
    }); 
</script>

動畫代碼：

<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>

而且圖像被附：

來源

2017-07-17 user3615851

應該的document.getElementById（「重放」），排除＃的id屬性我想綁定。 – error404

奏效最終代碼，希望它可以幫助別人：

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); 
     } 
    }

來源

2018-01-25 12:57:18 user3615851

我相信，因爲你忘了加半發生錯誤-結腸。

var elem = document.getElementById('bodymovin_overlay')

到

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

來源

2017-07-17 07:36:29

很遺憾沒有解決它 – user3615851

嘗試使用jQuery for $（「＃replay」）。on（'click'，function（）{// do something}）; –

問題解決。覆蓋z-索引涵蓋了動畫，所以點擊沒有發生 – user3615851

從刪除的document.getElementById＃（「＃重放」）。

使用的document.getElementById（「重放」）（本機JS），或通過jQuery $（ '＃重演'）

來源

2017-07-17 07:42:04

不幸的是沒有解決問題 – user3615851

問題解決 - 覆蓋擋住了動畫的z-index，不得不給它一個更高z-index比疊加。

來源

2017-07-17 08:24:46 user3615851

Onclick後效果動畫（bodymovin.js）ID沒有任何反應

回答

相關問題