未捕獲TypeError：Wordpress jquery幻燈片 - 對象沒有方法

Question

我一直在使用一個簡單的jQuery幻燈片在wordpress主題的問題。我可以得到這個工作在標準的HTML，但只要我把它放在PHP中我得到'未捕獲TypeError：對象＃沒有方法'easeOutCirc'。

幻燈片會整合到頭部DOC

腳本在的header.php

   <script type="text/javascript"> 
     (function($) { 
      $(function() { 
       $('#slideshow').cycle({ 
        fx:  'scrollHorz', 
        timeout: 7000, 
        next: '#rarr', 
        prev: '#larr' 
       }); 

       $(".tabContent:not(:first)").hide(); 
       $(".tabContent").eq(0).show(); 
       $("#tabNav li:first").addClass("active"); 
        $("#tabNav li").click(function(){ 
         $(".tabContent").hide(); 
         $("#" + $(this).attr("tagger")).show(); 
         $("#tabNav .active").removeClass("active"); 
         $(this).addClass("active"); 
        }); 
      }) 
     })(jQuery) 
    </script> 

幻燈片標記（在的header.php）

  <div class="rotator"> 
      <ul id="rotmenu"> 
       <li> 
        <a href="rot1">Christmas Markets</a> 
        <div style="display:none;"> 
         <div class="info_image">Magdeburgchristmasmarket.jpg</div> 
         <div class="info_heading">Christmas Markets</div> 
         <div class="info_description"> 
      From the aromas of freshly baked gingerbread, cinnamon and gluhwein to the joyous sounds of carol singers, sparkling fairy lights and pretty wooden stalls, a pre-Christmas break to one of Europe’s Christmas Markets... 
          <a href="christmas.html" class="more">Read more</a> 
         </div><!-- END description --> 
        </div><!-- END display none --> 
       </li> 
       <li> 
        <a href="rot2">New Story2</a> 
        <div style="display:none;"> 
         <div class="info_image">olympic-logo-copy.jpg</div> 
         <div class="info_heading">New Story2</div> 
         <div class="info_description"> 
      Second story content to continue reading click read more after text finishes... 
          <a href="#" class="more">Read more</a> 
         </div><!-- END description --> 
        </div><!-- END display none --> 
       </li> 
       <li> 
        <a href="rot3">New Story3</a> 
        <div style="display:none;"> 
         <div class="info_image">Loch-Lomond-beautiful-scotland-by-coach-holiday.jpg</div> 
         <div class="info_heading">New Story3</div> 
         <div class="info_description"> 
      .... 
          <a href="#" class="more">Read more</a> 
         </div><!-- END description --> 
        </div><!-- END display none --> 
       </li> 


      </ul><!-- END rot menu --> 
      <div id="rot1"> 
       <img src="" width="900" height="300" class="bg" alt=""/> 
       <div class="heading"> 
        <h1></h1> 
       </div> 
       <div class="description"> 
        <p></p> 

       </div> <!-- END description --> 
      </div><!-- END rot1 --> 
     </div><!-- END rotator --> 

和腳本功能在footer.php doc

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.easing.1.3.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var current = 1; 

      var iterate  = function(){ 
       var i = parseInt(current+1); 
       var lis = $('#rotmenu').children('li').size(); 
       if(i>lis) i = 1; 
       display($('#rotmenu li:nth-child('+i+')')); 
      } 
      display($('#rotmenu li:first')); 
      var slidetime = setInterval(iterate,4000); 

      $('#rotmenu li').bind('click',function(e){ 
       clearTimeout(slidetime); 
       display($(this)); 
       e.preventDefault(); 
      }); 

      function display(elem){ 
       var $this = elem; 
       var repeat = false; 
       if(current == parseInt($this.index() + 1)) 
        repeat = true; 

       if(!repeat) 
        $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){ 
         $(this).animate({'opacity':'0.7'},700); 
        }); 

       current = parseInt($this.index() + 1); 

       var elem = $('a',$this); 

        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300); 

       var info_elem = elem.next(); 
       $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){ 
        $('h1',$(this)).html(info_elem.find('.info_heading').html()); 
        $(this).animate({'left':'0px'},400,'easeInOutQuad'); 
       }); 

       $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){ 
        $('p',$(this)).html(info_elem.find('.info_description').html()); 
        $(this).animate({'bottom':'0px'},400,'easeInOutQuad'); 
       }) 
       $('#rot1').prepend(
       $('<img/>',{ 
        style : 'opacity:0', 
        className : 'bg' 
       }).load(
       function(){ 
        $(this).animate({'opacity':'1'},600); 
        $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){ 
         $(this).remove(); 
        }); 
       } 
      ).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','900').attr('height','300') 
      ); 
      } 
     }); 
    </script> 

我們是否錯過了腳本中的任何內容？任何建議將非常令人愉快！

謝謝

Answer 1

jQuery UI效果不包含在jquery-ui-core句柄中。請參閱codex

您可能需要從url加載自定義jquery-ui包。下面將加載從谷歌cdn的完整jquery UI

<?php wp_enqueue_script("myUi","https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"); ?>