Как узнать .hover(), чтобы подождать?

Question

У меня есть выпадающее меню. Теперь, когда он переместился на несколько уровней, я бы хотел, чтобы он добавлял время ожидания как 2 секунды, прежде чем он исчезнет, ​​поэтому пользователь может вернуться обратно, когда он по ошибке ошибается .hover().

Возможно ли это?

мой код для слайда:

$('.icon').hover(function() { 
     $('li.icon > ul').slideDown('fast'); 
    }, function() { 
     $('li.icon > ul').slideUp('fast'); 
    }); 

Answer 1

Это сделает вторую функцию ждать 2 секунды (2000 миллисекунд) перед выполнением:

$('.icon').hover(function() { 
    clearTimeout($(this).data('timeout')); 
    $('li.icon > ul').slideDown('fast'); 
}, function() { 
    var t = setTimeout(function() { 
     $('li.icon > ul').slideUp('fast'); 
    }, 2000); 
    $(this).data('timeout', t); 
}); 

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

Это не очень элегантный способ сделать это. Вероятно, вы должны проверить плагин hoverIntent, который предназначен для решения этой конкретной проблемы.

Answer 2

Общая идея заключается в том, чтобы использовать setTimeout, например, так:

$('.icon').hover(function() { 
      $('li.icon > ul').slideDown('fast'); 
    }, function() { 
      setTimeout(function() { 
       $('li.icon > ul').slideUp('fast'); 
      }, 2000); 
    }); 

Но это может сделать противоречащий вещи, если пользователь Мыши и затем снова Мыши быстро-это не учитывает очистки тайм-аута при пользователь снова нависает над ним. Это потребует дополнительного состояния.

Answer 3

лично мне нравится «hoverIntent» плагин:

http://cherne.net/brian/resources/jquery.hoverIntent.html

со страницы: hoverIntent это плагин, который пытается определить намерения пользователя ... как хрустальный шар, только с помощью мыши движение! Он работает как (и был получен из) встроенного зависания jQuery. Однако вместо немедленного вызова функции onMouseOver он ждет, пока пользовательская мышь не замедлит работу до совершения вызова.

Почему? Задержка или предотвращение случайного срабатывания анимации или вызовов ajax. Простые тайм-ауты работают для небольших областей, но если ваша целевая область велика, она может выполняться независимо от намерения.

var config = {  
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
interval: 200, // number = milliseconds for onMouseOver polling interval  
over: makeTall, // function = onMouseOver callback (REQUIRED)  
timeout: 500, // number = milliseconds delay before onMouseOut  
out: makeShort // function = onMouseOut callback (REQUIRED) 
}; 
$("#demo3 li").hoverIntent(config) 

Опции конфигурации

Чувствительность: Если мышь проходит меньше, чем это число пикселей между интервалами опроса, то «над» функция будет вызвана. При минимальном пороге чувствительности 1 мышь не должна перемещаться между интервалами опроса. С более высокими порогами чувствительности вы, скорее всего, получите ложный результат. Чувствительность по умолчанию: 7

интервал: Число миллисекунд hoverIntent ожидает от чтения/сравнения координаты мыши. Когда пользовательская мышь сначала входит в элемент, ее координаты записываются. Скорее всего, функция «over» может быть вызвана после одного интервала опроса. Установка интервала опроса выше приведет к увеличению задержки до первого возможного «сверх» вызова, но также увеличивает время до следующей точки сравнения. Интервал по умолчанию: 100

over: Обязательно.Функция, которую вы хотите вызвать onMouseOver. Ваша функция получает те же «это» и «события» объекты, что и из метода наведения jQuery.

таймаут: Простая задержка в миллисекундах, прежде чем вызывается функция «выход». Если пользователь возвращается к элементу до истечения времени ожидания, функция «выход» не будет вызываться (и не будет вызываться функция «over»). Это прежде всего защита от неаккуратных/человеческих траекторий мышц, которые временно (и непреднамеренно) снимают пользователя с целевого элемента ... давая им время для возвращения. Тайм-аут по умолчанию: 0

out: Обязательно. Функция, которую вы хотите вызвать onMouseOut. Ваша функция получает те же «это» и «события» объекты, что и из метода наведения jQuery. Примечание. Функция hoverIntent будет вызывать только функцию «out», если функция «over» была вызвана в тот же самый запуск.

Answer 4

$('.icon').on("mouseenter mouseleave","li.icon > ul",function(e){ 
    var $this = $(this); 
    if (e.type === 'mouseenter') { 
     clearTimeout($this.data('timeout')); 
     $this.slideDown('fast'); 
    }else{ // is mouseleave: 
     $this.data('timeout', setTimeout(function(){ 
      $this.slideUp('fast'); 
     },2000)); 
    } 
}); 

Answer 5

Следующая остановит скольжение от срабатывания на 2 секунды:

$('.icon').hover(function() { 
    $('li.icon > ul').delay(2000).slideDown('fast'); 
}, function() { 
    $('li.icon > ul').slideUp('fast'); 
}); 

Answer 6

Я думаю, что это код ваша потребность:

jQuery(document).ready(function($) { 
    var navTimers = []; 
    $('.icon').hover(function() { 
      var id = jQuery.data(this); 
      var $this = $(this); 
      navTimers[id] = setTimeout(function() { 
       $this.children('ul').slideDown('fast'); 
       navTimers[id] = ""; 
      }, 300); 
     }, 
     function() { 
      var id = jQuery.data(this); 
      if (navTimers[id] != "") { 
       clearTimeout(navTimers[id]); 
      } else { 
       $(this).children("ul").slideUp('fast'); 
      } 
     } 
    ); 
}); 

Answer 7

или вы могли бы просто использовать переход: все 2s легкость в выходе. убедитесь, что вы добавляете -webkit, -moz и -o для разных браузеров.

Answer 8

Я хотел бы добавить к Паоло Bergantino, что вы можете сделать это без attribut данных:

var timer; 
$('.icon').hover(function() { 
    clearTimeout(timer); 
    $('li.icon > ul').slideDown('fast'); 
}, function() { 
    timer = setTimeout(function() { 
     $('li.icon > ul').slideUp('fast'); 
    }, 2000); 
}); 

Answer 9

var timer; 

var delay = 200; 

$('#hoverelement').hover(function() { 

    on mouse hover, start a timeout 

    timer = setTimeout(function() { 

     Do your stuff here 

    }, delay); 

}, function() { 

    Do mouse leaving function stuff here  

    clearTimeout(timer); 
}); 

// редактировать: instert код