jQuery не работает на сайте

Discussion in 'Интерактивные возможности' started by AlexChervon, Nov 20, 2015.

  1. AlexChervon
    Offline

    AlexChervon Пользователь

    Joined:
    Nov 14, 2015
    Messages:
    63
    Likes Received:
    0
    Gender:
    Male
    в index.php есть див

    <div id="topmenu" class="test" data-effect="bounceIn" >
    <jdoc:include type="modules" name="topmenu" />
    </div>

    я создал класс (test) и data-effect="bounceIn" . У меня подключена библиотека animated.css
    Далее я захотел сделать так чтобы при наведении на пункт меню запускалась анимация. Я подключил библиотеку JQ проверил на работоспособность функцией alert. Далее в тегах head написал следующий скрипт

    <script>
    jq = jQuery.noConflict();
    function animate(elem) {
    var effect=elem.date("effect");
    elem.addClass("animated" +effect);

    }
    jq(document).ready(function(){
    jq("#test").mouseenter(function)(){
    animate(jq(this));
    });
    });

    </script>

    но при наведении на пунт меню ничего не происходит
     
  2.  
  3. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
    Анимацию можно и без Jquery делать, css анимация это как раз и делает.

    С Jquery лучше код внутри писать:

    Код (CODE):
    1. jQuery(document).ready(function($) {
    2.  $('.test').......... и прочее
    3.  
    4.  
    5.  });
     
  4. AlexChervon
    Offline

    AlexChervon Пользователь

    Joined:
    Nov 14, 2015
    Messages:
    63
    Likes Received:
    0
    Gender:
    Male
    вот сделал

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script>
    jQuery(document).ready(function($) {
    $('.test')function animate(elem){
    var effect = elem.data("effect");
    if(!effect || elem.hasClass(effect)) return false;
    elem.addClass(effect);
    setTimeout( function(){
    elem.removeClass(effect);
    }, 1000);
    }
    });

    </script>


    в дивах так
    <div class="test" id="topmenu" data-effect="bounceIn">
    <jdoc:include type="modules" name="topmenu" />
    </div>



    но ничего не работает((
     
  5. CB9T
    Offline

    CB9T Преподаватель по J! Staff Member ⇒ Профи ⇐

    Joined:
    May 21, 2010
    Messages:
    2,604
    Likes Received:
    322
    Gender:
    Male
    Код (html):
    1. <div class="circleper"><a target="_blank" href="http://coupons.salonsuzana.ru/">%</a></div>



    Код (CODE):
    1. .circleper {
    2.     animation: percskidka 2s infinite linear;
    3.     -moz-animation: percskidka 2s infinite linear;
    4.     -webkit-animation: percskidka 2s infinite linear
    5. }


    Код (CODE):
    1. @keyframes percskidka {
    2.     from {
    3.         transform: rotate(0)
    4.     }
    5.  
    6.     to {
    7.         transform: rotate(360deg)
    8.     }
    9. }
    10.  
    11. @-moz-keyframes rotate {
    12.     from {
    13.         -moz-transform: rotate(0)
    14.     }
    15.  
    16.     to {
    17.         -moz-transform: rotatepercskidka(360deg)
    18.     }
    19. }
    20.  
    21. @-webkit-keyframes rotate {
    22.     from {
    23.         -webkit-transform: rotate(0)
    24.     }
    25.  
    26.     to {
    27.         -webkit-transform: rotate(360deg)
    28.     }
    29. }


    demo http://salonsuzana.ru/

    и не надо jquery
     
    AlexChervon likes this.
  6. OlegM
    Offline

    OlegM Russian Joomla! Team Staff Member

    Joined:
    Apr 12, 2007
    Messages:
    4,310
    Likes Received:
    375
    Gender:
    Male
    AlexChervon likes this.

Share This Page

Loading...