Простой JQuery анимации по щелчку не работает на WordPress сайте

Question

Это заставляет меня нервничать ...

Я хотел бы, чтобы мои два списка меню (<ul id="cont1"> и <ul id="cont2">) двигаться, когда мы нажмем на .bttn1 и .bttn2. Они находятся на боковой панели. Один из них скрыт DIV меню:

HTML в текстовом виджете:

<div id="menu"> 

    <div class="bttn1">Pages public</div> 
    <div class="bttn2">Pages communauté</div> 

    <div id="cont"> 
     <ul id="cont1"> 
      <li class="n01">01</li> 
      <li class="n02" id="page9"> 
       <a href="http://www.igorlaszlo.com/test/"> 
        <img src="images/icon1.png" alt="accueil" /> 
        <p>Accueil</p> 
       </a> 
      </li> 
      <li class="n03"></li> 
      <li class="n04"></li> 
      <li class="n05" id="page11"> 
       <a href="http://www.igorlaszlo.com/test/register/"> 
        <img src="images/icon2.png" alt="abonnement" /> 
        <p>Inscription</p> 
       </a> 
      </li> 
      ... 
     </ul> 

     <ul id="cont2"> 
      <li class="n01">10</li> 
      <li class="n02" id="page23"> 
       <a href="http://www.igorlaszlo.com/test/members/"> 
        <img src="images/icon10.png" alt="communauté" /> 
        <p>Liste Membres</p> 
       </a> 
      </li> 
      <li class="n03"></li> 
      <li class="n04"></li> 
      <li class="n05" id="page25"> 
      ... 
     </ul> 
    </div> 
</div> 

CSS-

#menu { 
    width: 242px; 
    letter-spacing: normal; 
    line-height: normal; 
    overflow: hidden; 
} 

#menu .bttn1, 
#menu .bttn2 { 
    position: relative; 
    display: block; 
    width: 80%; 
    height: 30px; 
    padding: 2%; 
    line-height: 30px !important; 
    text-align: center; 
    cursor: pointer; 
    color: #fdfdfd; 
    background: #ce2d32; 
    -webkit-box-shadow: 0px 1px 7px rgba(0,0,0,0.7); 
    -moz-box-shadow: 0px 1px 7px rgba(0,0,0,0.7); 
    box-shadow: 0px 1px 7px rgba(0,0,0,0.7); 
    -webkit-transition:all .3s ease-in-out; 
    -moz-transition:all .3s ease-in-out; 
    -ms-transition:all .3s ease-in-out; 
    -o-transition:all .3s ease-in-out; 
    transition:all .3s ease-in-out; 
    -webkit-transform:rotate(5deg); 
    -moz-transform:rotate(5deg); 
    -ms-transform:rotate(5deg); 
    -o-transform:rotate(5deg); 
    transform:rotate(5deg); 
} 
#menu #cont { 
    position: relative; 
    display: block; 
    width: 500px; 
    height: 550px; 
} 
#menu #cont1 {top: 0;left: 0;} 
#menu #cont2 {top: 0;left: 252px;} 
#menu ul { 
    position: absolute; 
    width: 242px; 
    height: 450px; 
    margin: 0; 
    list-style: none; 
} 

У меня есть WordPress сайт тест, который включает в себя уже файл jquery по умолчанию. я поместите следующий код в footer.php непосредственно перед закрывающим тегом/тела:

... 

<?php wp_footer(); ?> 

<script> 
    $(document).ready(function() { 

     $('#menu #cont1').css('left',0); 
     $('#menu #cont2').css('left','252px'); 

     $('#menu .bttn1').click(function(){ 
      $('#menu #cont1').delay(300).animate({'left':'-252px'},800,'easeInOut'); 
      $('#menu #cont2').delay(500).animate({'left':0},800,'easeInOut'); 
     }); 
     $('#menu .bttn2').click(function(){ 
      $('#menu #cont1').delay(500).animate({'left':0},800,'easeInOut'); 
      $('#menu #cont2').delay(300).animate({'left':'252px'},800,'easeInOut'); 
     }); 

    }); 
</script> 

</body> 
</html> 

Это не работает, и я не нахожу эту проблему. Я пытался добавить код в head.php тоже не двигается вообще ...

Сайт тест: http://www.igorlaszlo.com/test/

Вопрос заключается в том, что случилось с выше код или как я могу проверить если что-то блокирует скрипт?

Answer 1

Ну, это решение простое, и вы могли его увидеть, если вы проверили консоль.

TypeError: $ is not a function 

Так InstEd использования $ для JQuery использовать jQuery. Кроме того, где находятся в настоящее время нет easeInOut не загружен Jquery так загрузить jQueryUi

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 

Окончательная яваскрипта код:

jQuery(document).ready(function() { 
    jQuery('#menu #cont1').css('left',0); 
    jQuery('#menu #cont2').css('left','252px'); 

    jQuery('#menu .bttn1').click(function(){ 
     jQuery('#menu #cont1').delay(300).animate({'left':'-252px'},800,'easeInOut'); 
     jQuery('#menu #cont2').delay(500).animate({'left':0},800,'easeInOut'); 
    }); 
    jQuery('#menu .bttn2').click(function(){ 
     jQuery('#menu #cont1').delay(500).animate({'left':0},800,'easeInOut'); 
     jQuery('#menu #cont2').delay(300).animate({'left':'252px'},800,'easeInOut'); 
    }); 
}); 

** EDIT ** Я думаю, что вы нашли свою ошибку.

Answer 2

Существует несколько вещей, которые вы можете решить, чтобы устранить проблему. Сначала убедитесь, что ваш код работает правильно вне Word Press. Вы можете воссоздать то, что вы пытаетесь сделать в JSFiddle, чтобы убедиться, что ваш JS работает правильно.

Как только вы получите это правильно, добавьте его на свой веб-сайт Word Press. Если у вас возникли проблемы с проверкой, чтобы убедиться, что вы используете правильную версию JQuery (более старые версии могут вызывать проблемы). Вы должны также отключить свои плагины при тестировании, чтобы убедиться, что конфликтов JavaScript нет.

Наконец вам нужно не, чтобы установить Jquery нет конфликта для WordPress, как это:

(function($){ 
    // your plugin code 
})(jQuery); 

Вы можете ссылаться на этот post here.