Если элемент был 'mouseover'ed для 500 мс, выполнял функцию с jQuery
Для исправности моих пользователей я хочу, чтобы событие 'наведения мыши' бежало за селектором, колебался в течение половины секунды, а не как только они колеблются он.
Я сначала попробовал функцию setTimeout, но это работает однако долго, элемент колебался, я не продумывал его слишком много, я предполагаю. Я также провел день (на и прочь) ищущий (и играющий Pacman) ti никакой результат, если я не ищу неправильные вещи.
Я хотел бы сохранить этот плагин меньше, если мы можем, просто для выполненной скорости и пригодности для обслуживания.
$("#mySelector").mouseover(function(){
// Run after 500ms
$(this).addClass("hasBeen500ms");
});
Давайте посмотрим, можем ли мы взломать это, я знаю, что это будет иметь столько приложений!
6 ответов
Запретить отображение, если мышь уже отключена к моменту истечения задержки, плюс удалить класс при выходе мыши:
$("#mySelector").mouseenter(function() {
var el = $(this);
var timeoutId = setTimeout(function() {
el.addClass("hasBeen500ms");
}, 500);
el.mouseleave(function() {
clearTimeout(timeoutId);
el.removeClass("hasBeen500ms");
});
});
.delay () не работал, так как .addClass () не является частью очереди анимации, поэтому вместо этого я решил анимировать что-то нулевое ( выбрал visibility: visible , так как вы не будете наводить курсор на невидимый элемент), а затем запустите добавление класса hover в функции обратного вызова:
$('#mySelector').mouseenter(function(){
$(this).animate({'visibility':'visible'},500,'swing',function(){
$(this).addClass('hoverIntent');
})
});
$('#mySelector').mouseleave(function(){
$(this).removeClass('hoverIntent').stop().clearQueue();
});
При отпускании мыши класс удаляется, и очередь анимации остановлен и очищен, если он до 500 мс. Вы можете добавить такую же функциональность в mouseleave, если вам нужна задержка перед отменой наведения.
Я пытаюсь использовать ответ Web Logic
, чтобы создать переменную для отслеживания, если мышь все еще находится над указанным элементом:
var isMouseOver=false;
$("#mySelector").mouseover(function(){
isMouseOver=true;//set variable to gtrue
setTimeout(function() {
if(isMouseOver){
$(this).addClass("hasBeen500ms");
}
}, 500);
});
также установите обратный вызов mouseout , чтобы мы могли отслеживать если мышь все еще там после 500 мс.
$("#mySelector").mouseout(function(){
isMouseOver=false;//set variable to false
});
надеюсь, что это сработает!
Просмотрите этот вопрос SO о настройке обратного вызова для функции setTimeout.
Другой вариант - отменить тайм-аут, если человек перемещает мышь до того, как пройдут 500 мс:
var timer;
$('#mySelector').mouseover(function() {
timer = setTimeout( function() {$(this).addClass('hasBeen500ms');}, 500);
});
$('#mySelector').mouseout(function() {
clearTimeout(timer);
});
Похоже, вы могли бы использовать плагин hoverIntent .