2017-05-05 174 views
0

我有這個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沒有添加到元素上。我不知道爲什麼..

+0

*它似乎不能正確運行*你能更具體嗎 –

+0

你排隊這個腳本嗎? – LebCit

+0

我的意思是它沒有做它應該做的事情:當元素在視口上可見時動畫元素。雖然代碼在CodePen上運行良好,但動畫在我的網站上完全沒有運行。 – dominotrix

回答

0

您的main.js根本沒有加載!
您可以查看代碼的來源,Ctrl + U或右鍵單擊並查看頁面源代碼。
其他JS腳本已加載。
main.js的路徑是/js,我想你必須把它放在/assets/js
再看看你的enqueue函數。你可以把它粘貼在這裏。
SYA

+0

它被加載,爲什麼你否則說?我在網上發現了另一個腳本,用於「可見時有動畫」,現在它正確運行。沒有想到爲什麼以前的腳本不工作。 – dominotrix

+0

轉到您的[站點](https://artware.gr/)並查看代碼'view-source:https:// artware.gr /'的源代碼。按Ctrl + F並搜索你的'main.js' – LebCit

+1

你犯了一個錯誤的隊友。這不是我正在談論的網站。它是這樣的:https://artware.gr/thermoplastiki/ – dominotrix

相關問題