Wordpress打破了jQuery背景动画脚本

Question

我在一个小的背景动画脚本上得到如下所示的错误（73TypeError），当包含在Wordpress主题的标题中时，会破坏脚本。当脚本包含在非Wordpress页面上时，我没有看到任何错误：

这是脚本：

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

有人可以告知导致此错误的原因吗？

谢谢，

尼克

Answer 1

在wordpress中解决，jQuery应该加载no-COnflict。所以在这种情况下你的文件应该是;

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

希望这会有所帮助。