脚本在Codepen上正常工作，但不在WP网站上

我有这个codepen，它工作正常，但是当我将它加载到我的Wordpress site上时，它似乎无法正常运行。脚本在Codepen上正常工作，但不在WP网站上

这里是JS代码：

jQuery(document).ready(function() { 
(function(jQuery, win) { 
    jQuery.fn.inViewport = function(cb) { 
     return this.each(function(i, el) { 
      function visPx() { 
       var H = jQuery(this).height(), 
        r = el.getBoundingClientRect(), 
        t = r.top, 
        b = r.bottom; 
       return cb.call(el, Math.max(0, t > 0 ? H - t : b < H ? b : H)); 
      } 
      visPx(); 
      jQuery(win).on("resize scroll", visPx); 
     }); 
    }; 
})(jQuery, window); 

jQuery(".kk-img").inViewport(function(px) { 
    if (px) jQuery(this).addClass("vsb"); 
    jQuery(this).toggleClass("vsb", !!px); 
}); 

jQuery(".kk-rec").inViewport(function(px) { 
    if (px) jQuery(this).addClass("vsb"); 
    jQuery(this).toggleClass("vsb", !!px); 
}); 
});

而且，开发工具的控制台显示没有错误。任何人都有一个想法，我应该在哪里寻找解决这个问题？

谢谢您的时间。

---一些更多的澄清---

的JS代码的某些元素添加一个类时，这些都在视口中可见。然后这些元素有一些转换，以便它们看起来很流畅（你可以检查代码链接上的代码是什么）。

在我的网站上，它是“不工作”，因为addClass没有添加到元素上。我不知道为什么..

来源

2017-05-05 dominotrix

*它似乎不能正确运行*你能更具体吗 –

你排队这个脚本吗？ – LebCit

我的意思是它没有做它应该做的事情：当元素在视口上可见时动画元素。虽然代码在CodePen上运行良好，但动画在我的网站上完全没有运行。 – dominotrix

您的main.js根本没有加载！
您可以查看代码的来源，Ctrl + U或右键单击并查看页面源代码。
其他JS脚本已加载。
main.js的路径是/js，我想你必须把它放在/assets/js
再看看你的enqueue函数。你可以把它粘贴在这里。
SYA

来源

2017-05-05 06:49:13 LebCit

它被加载，为什么你否则说？我在网上发现了另一个脚本，用于“可见时有动画”，现在它正确运行。没有想到为什么以前的脚本不工作。 – dominotrix

转到您的[站点]（https://artware.gr/）并查看代码'view-source：https：// artware.gr /'的源代码。按Ctrl + F并搜索你的'main.js' – LebCit

你犯了一个错误的队友。这不是我正在谈论的网站。它是这样的：https：//artware.gr/thermoplastiki/ – dominotrix

脚本在Codepen上正常工作，但不在WP网站上

回答

相关问题