javascript 如何在 Visual Composer/Wordpress 中运行自定义 HTML/JS/GSAP？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28552639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to run custom HTML/JS/GSAP inside Visual Composer/Wordpress?
提问by Mitch
I am attempting to use custom JS and custom html within VC, but am having trouble correctly calling the JS code. My goal is to be able to use the Greensock Animation Platform. I am starting with simple code to get this working. In Visual Composer, I have setup a "Raw HTML" element, and also a "Raw JS" element. When I launch the page, the HTML shows up correctly, but most of my scripts don't execute. The default script that is provided by VC works:
我试图在 VC 中使用自定义 JS 和自定义 html，但无法正确调用 JS 代码。我的目标是能够使用 Greensock 动画平台。我从简单的代码开始让这个工作。在 Visual Composer 中，我设置了一个“Raw HTML”元素和一个“Raw JS”元素。当我启动页面时，HTML 正确显示，但我的大多数脚本都没有执行。VC 提供的默认脚本有效：
<script type="text/javascript"> alert("Enter your js here!" ); </script>
However, this simple script fails:
但是，这个简单的脚本失败了：
<script> function onReady() {
console.log('Here')
}
</script>
Also, a simple GSAP script fails:
此外，一个简单的 GSAP 脚本失败了：
<script type=?"text/?javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
<script type=?"text/?javascript">
TweenMax.set('#slide3', {opacity: 0});
}
</script>
My current attempt is here: https://themilkmob.org/zgsaptest01/
我目前的尝试在这里：https: //themilkmob.org/zgsaptest01/
A screengrab of the backend editor:
Thanks.
后端编辑器的屏幕截图：谢谢。
回答by Mitch
I'd imagine this can be improved, but with help from someone on the Greensock Fourm, I've been able to get this to work:
If there is a page element with ID "slide3", this code (in a "RawJS" VC element) will set it to 50% transparent:
我想这可以改进，但在 Greensock Fourm 上的某个人的帮助下，我已经能够让它工作：
如果有一个 ID 为“slide3”的页面元素，这个代码（在“RawJS”中） VC 元素）将其设置为 50% 透明：
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
jQuery(document).ready(function(){
TweenMax.set('#slide3', {opacity: 0.5});
});
</script>
