Wordpress中斷jQuery背景動畫腳本

Question

當包含在Wordpress主題的標題中時，我會在小的背景動畫腳本中看到下面顯示的錯誤（73TypeError），這會打破腳本。我沒有看到任何錯誤，當包括非WordPress的網頁上的腳本：

下面是腳本：

$(function() { 
    $(".bottom").hover(function() { 
     $(this).animate({ 
     backgroundPosition : '0px 35px'} 
     , 300); } 
    , function() { 
     $(this).animate({ 
     backgroundPosition : '0px 0px'} 
     , 600); } 
    ); 
    } 
); 

可能有人建議在是什麼原因造成這個錯誤？

感謝，

尼克

Answer 1

拳關在WordPress，jQuery的裝入時應該沒有衝突。所以在這種情況下你的文件應該是;

var $j = jQuery.noConflict(); 

$j(function() { 
    $j(".bottom").hover(function() { 
     $j(this).animate({ 
     backgroundPosition : '0px 35px'} 
     , 300); } 
    , function() { 
     $j(this).animate({ 
     backgroundPosition : '0px 0px'} 
     , 600); } 
    ); 
    } 
); 

;其次，像提到的定義，你需要使用wp-enqueue-script();

要做到這一點加載您的jQuery，最佳實踐，把你的jQuery在一個單獨的文件。打電話給它例如bganimation.js

現在要在wordpress中加載該js文件，請使用wp-enqueue-script（）;喜歡這個。

function this_is_jquery_example(){ 
wp_enqueue_script('jquery');; 
wp_enqueue_script('myscript', plugin_dir_url(__FILE__) .' bganimation.js'); 

} 
add_action('wp_enqueue_scripts','this_is_jquery_example'); 

希望這有助於。