У меня есть выпадающее меню. Теперь, когда он переместился на несколько уровней, я хотел бы, чтобы он добавил время ожидания как 2 секунды, прежде чем он исчезнет, поэтому пользователь может вернуться обратно, когда он по ошибке нарушит .hover().
Возможно ли это?
мой код для слайда:
$('.icon').hover(function() {
$('li.icon > ul').slideDown('fast');
}, function() {
$('li.icon > ul').slideUp('fast');
});
Это заставит вторую функцию ждать 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, который предназначен для решения этой конкретной проблемы.
лично мне нравится плагин "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 )
Параметры конфигурации
Чувствительность: Если мышь перемещается меньше, чем это число пикселей между интервалами опроса, тогда будет вызвана функция "over". При минимальном пороге чувствительности 1 мышь не должна перемещаться между интервалами опроса. С более высокими порогами чувствительности вы, скорее всего, получите ложный результат. Чувствительность по умолчанию: 7
интервал: Число миллисекунд hoverIntent ждет между чтением/сравнением координат мыши. Когда пользовательская мышь сначала входит в элемент, ее координаты записываются. Скорее всего, функция "over" может быть вызвана после одного интервала опроса. Установка интервала опроса выше приведет к увеличению задержки до первого возможного "сверх" вызова, но также увеличивает время до следующей точки сравнения. Интервал по умолчанию: 100
над Необходимые. Функция, которую вы хотите вызвать onMouseOver. Ваша функция получает те же объекты "this" и "event", что и метод jQuery hover.
Тайм-аут: Простая задержка в миллисекундах перед вызовом функции "out". Если пользователь возвращается к элементу до истечения времени ожидания, функция "выход" не будет вызываться (и не будет вызываться функция "over" ). Это прежде всего защита от неаккуратных/человеческих траекторий мышц, которые временно (и непреднамеренно) снимают пользователя с целевого элемента... давая им время для возвращения. Тайм-аут по умолчанию: 0
из Необходимые. Функция, которую вы хотите вызвать onMouseOut. Ваша функция получает те же объекты "this" и "event", что и метод jQuery hover. Обратите внимание, что hoverIntent будет вызывать только функцию "out", если функция "over" была вызвана при этом же запуске.
Общая идея состоит в том, чтобы использовать setTimeout, например:
$('.icon').hover(function() {
$('li.icon > ul').slideDown('fast');
}, function() {
setTimeout(function() {
$('li.icon > ul').slideUp('fast');
}, 2000);
});
Но это может привести к противоречивым вещам, если пользователь вымят, а затем снова выйдет из мыши - это не объясняет сброс таймаута, когда пользователь снова нависает над ним. Это потребует дополнительного состояния.
$('.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) );
}
});
Следующее остановит переход от срабатывания на 2 секунды:
$('.icon').hover(function() {
$('li.icon > ul').delay(2000).slideDown('fast');
}, function() {
$('li.icon > ul').slideUp('fast');
});
Я думаю, что это код, который вам нужен:
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');
}
}
);
});
или вы можете просто использовать переход: все 2-х развязки. убедитесь, что вы добавили -webkit, -moz и -o для разных браузеров.
Я хотел бы добавить к Паоло Бергантино, что вы можете сделать это без атрибута данных:
var timer;
$('.icon').hover(function() {
clearTimeout(timer);
$('li.icon > ul').slideDown('fast');
}, function() {
timer = setTimeout(function() {
$('li.icon > ul').slideUp('fast');
}, 2000);
});
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);
});
//edit: instert code