Вопрос по javascript, jquery – Как сказать .hover () ждать?

49

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

Является ли это возможным?

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

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

Ваш Ответ

9   ответов
42

лично мне нравится & quot; hoverIntent & quot; плагин:

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 ) 

Configuration Options

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

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

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

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

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

Error: User Rate Limit ExceededoverkillError: User Rate Limit Exceeded
0
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);
});

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

0

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

    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'); 
            }  
        }  
    );  
}); 
1

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

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

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

1

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

$('.icon').hover(function() {
  $('li.icon > ul').delay(2000).slideDown('fast');
}, function() { 
  $('li.icon > ul').slideUp('fast');
});
Error: User Rate Limit Exceeded
1
$('.icon').on("mouseenter mouseleave","li.icon > ul",f,unction(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) );  
   }
 });
1

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

Error: User Rate Limit Exceeded
0

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

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

Это заставит вторую функцию ждать 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 Плагин, который предназначен для решения этой конкретной проблемы.

Error: User Rate Limit Exceededjsfiddle.net/671noauq
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededthis jsFiddleError: User Rate Limit ExceededslideDown()Error: User Rate Limit ExceededslideUp()Error: User Rate Limit ExceededslideUp()Error: User Rate Limit ExceededhoverIntent()Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы