Jump to content
Sign in to follow this  
nemesis009

[Решено] Небольшая проблема с jquery hover

Recommended Posts

Всем привет. Помогите пожалуйста разобраться с такой ситуацией. Я сделал выпадающее меню на jquery.hover. Работать оно работает, только если циклично наводить и убирать курсор, hover будет отрабатывать много раз и получается меню открывается - закрывается несколько раз. В GIF'ке  видно. 
Вот код меню: 

$(document).ready(function(){
   $('#menu-cat').hover(function(){
     $('#category-box').slideDown('fast');
   },
   function(){
     $('#category-box').slideUp('fast');
   }
);

Как от этого избавиться?

post-682736-0-18922200-1433158076_thumb.gif

Edited by nemesis009

Share this post


Link to post
Share on other sites

slideDown и slideUp принимают колбеки (которые вызываются по завершению эффекта) вторым аргументом. перед вызовом эффекта разворачивания нужно сделать проверку что предыдущий эффект завершился

Share this post


Link to post
Share on other sites

Либо с помощью CSS все сделать, без применения JavaScript.

Share this post


Link to post
Share on other sites

slideDown и slideUp принимают колбеки (которые вызываются по завершению эффекта) вторым аргументом. перед вызовом эффекта разворачивания нужно сделать проверку что предыдущий эффект завершился

 

Спасибо большое за подсказку на счет callback, решил проблему следующим способом :

$('#menu-cat').hover(function(){
$('#category-box').slideDown('fast');
},
function(){
$('#category-box').slideUp('fast', function(){$(this).stop(true);});
}
);

Либо с помощью CSS все сделать, без применения JavaScript.

Спасибо, тоже идея хорошая, но мне проще было сделать на яваскрипте :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By Dragon
      jQuery async load
      Скачать/Купить дополнение Модуль позволяет переместить javascript-скрипты из шапки в подвал сайта и подгружать их асинхронно, тем самым ускорить отрисовку страницы, увеличить баллы в Google Pagespeed и повысить ранжирование в поисковой выдаче.

      Важно: модуль распространяется по принципу – одна лицензия на один домен.
       
      С его помощью можно добиться 100/100 баллов в Google PageSpeed Insights. Но только если вы выполнили все рекомендации Google PageSpeed Insights, кроме пункта "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы". В противном случае результат может быть всего на пару процентов лучше. 
      Демо: https://matuvi.com/oc2/async/


       
      Внимание. На демо помимо самого модуля оптимизированы изображения и включен кэш (не входит в модуль). 

      Протестировано на версиях OpenCart/ocStore 2.0.1.1, 2.1.0.2 и 2.3.0.2.3 на стандартных шаблонах со стандартным набором модулей.
      Автор модуля не гарантирует стабильную работу со сторонними плагинами и шаблонами.

      Теоретически модуль будет работать и на других версиях и сборках (пока кроме 3+).
      Если самостоятельно модуль установить не удалось: пишите в тему поддержки - поможем настроить.
      Добавил Dragon Добавлено 22.01.2018 Категория Кэширование, сжатие, ускорение Системные требования Сайт разработчика https://matuvi.com/ Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет Старая цена  
    • By comers
      Привет!
      Стоит задача показывать корзину в шапке, если товар добавлен в нее или скрывать, если она пустая. Добавление класса к #cart после php-проверки не вариант, т.к. надо корзину показывать сразу после первого клика на кнопку Купить. Единственный правильный способ - дописать ajax, который добавляет товар в корзину, а именно в cart.tpl. Я пробовал добавить в common.js в функцию
      'add': function(product_id, quantity) { после 
      success: function(json) {  команду 
       
      $('#cart').addClass('block');  но она не срабатывает. Что я делаю не так?
       
    • By Kingfrelance
      Добрый день 
      вот сайт
      http://088.cafe
      Кнопка добавить в корзину не работает в консоли ошибка
      jquery-2.1.1.min.js:4 POST http://088.cafe/ajax.php?do=addcart 404 (Not Found) Работает кнопка только в модуле рекомендуемые, это на главной - где вкусная пицца .. но ошибка в консоли все равно есть.
    • By Dragon
      Модуль позволяет переместить javascript-скрипты из шапки в подвал сайта и подгружать их асинхронно, тем самым ускорить отрисовку страницы, увеличить баллы в Google Pagespeed и повысить ранжирование в поисковой выдаче.

      Важно: модуль распространяется по принципу – одна лицензия на один домен.
       
      С его помощью можно добиться 100/100 баллов в Google PageSpeed Insights. Но только если вы выполнили все рекомендации Google PageSpeed Insights, кроме пункта "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы". В противном случае результат может быть всего на пару процентов лучше. 
      Демо: https://matuvi.com/oc2/async/


       
      Внимание. На демо помимо самого модуля оптимизированы изображения и включен кэш (не входит в модуль). 

      Протестировано на версиях OpenCart/ocStore 2.0.1.1, 2.1.0.2 и 2.3.0.2.3 на стандартных шаблонах со стандартным набором модулей.
      Автор модуля не гарантирует стабильную работу со сторонними плагинами и шаблонами.

      Теоретически модуль будет работать и на других версиях и сборках (пока кроме 3+).
      Если самостоятельно модуль установить не удалось: пишите в тему поддержки - поможем настроить.
    • By Aky
      Как передать POST параметр через ajax в файл controller модуля OpenCart ?
       
      Есть модуль "latest"  Файл контроллера latest.php, нужно передать туда параметр width через Ajax/Jquery  
       
      Как обратится к этому файлу? 
       
      Как работать с Ajax знаю, как параметры передать знаю, как принять знаю, но как обратится к нужному файлу в OpenCart?
       
      При попытках обращения по "url:' скрипт выдает ошибку  "404 (not found)"
       
      Пробовал вот так:
      url: 'index.php?route=extension/module/latest',  url: 'index.php?route=module/latest',  url: '/catalog/controller/extension/module/latest',   
      Если перейти на прямую по ссылки: "/catalog/controller/extension/module/latest.php"  выдает ошибку HTTP ERROR 500
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.