Задержка выполнения скрипта на Jquery

457
23 декабря 2016, 15:05

Делаю мега-мега меню.Заметил что при переходе з главного пунка меню к последнему дочернему по диагонали блок пропадает.Решил решить это задержкой на секунду,пол секунды чтоб пользователь успел навести к последнему пункту.Как можно реализовать задержку? Сейчас имеется вот такой вот код

  $('.mega-mnu ul li').hover(function () {
  var mega_inner  = $(this).find('ul');
   mega_inner.css({'display':'block'});
},
 function () {
     $('.mega-mnu ul li i').remove();
     var mega_inner  = $(this).find('ul');
     mega_inner.css({'display':'none'}).delay(5000);
 }
);

http://codepen.io/jSas/pen/LbavKz

Answer 1

Для решения проблемы вам нужно анализировать направление движения курсора мыши: если курсор движется вертикально, то открывать пункты меню в обычном режиме, а если горизонтально или по диагонали - игнорировать перемещение над соседними пунктами меню.

Определение направления курсора можно реализовать следующим образом. Добавьте перед вашим кодом следующий фрагмент:

var prevPageX = 0;
var isVerticalDirection = true;
var directionTimer = 0;
$('.mega-mnu ul').mousemove(function(e) {    
    if (directionTimer) {
       return false;
    }  
    directionTimer = setTimeout(function() {
        // в данном случае считается, что курсор движется не по вертикали,
        // если за время 50 миллисекунд его горизонтальное смещение больше 10 пикселей
        isVerticalDirection = Math.abs(e.pageX - prevPageX) < 10;
        clearTimeout(directionTimer);
        directionTimer = 0;
        prevPageX = e.pageX;
    }, 50);    
});

И измените свой код следующим образом:

$('.mega-mnu ul li').hover(function () {
      if (isVerticalDirection) {
        $(this).css({'color':'#000'});
        $(this).parent().find('li > ul:visible').hide();
        var mega_inner  = $(this).find('ul');
         mega_inner.css({'display':'block'});        
      }
  },
     function () {
        if (isVerticalDirection) {
          var mega_inner  = $(this).find('ul');
          mega_inner.css({'display':'none'});
      }         
   }
);
Answer 2
setTimeout(function(){
//some code here   
}, 1000)
READ ALSO
Анимация для каждого элемента next() в JQuery

Анимация для каждого элемента next() в JQuery

Я хочу добиться эффекта, что при нажатии на элемент icon-menu, каждый пункт li в отдельности последовательно плавно менял совою прозрачность и выезжал...

293
ошибка при инициализации с помощью std::tie

ошибка при инициализации с помощью std::tie

Ошибка при инициализации с помощью std::tie

285
Как отправить переменную из делегата в другой класс?

Как отправить переменную из делегата в другой класс?

В ComboBoxDelegatecpp получаю переменную key:

294