Tricky задержки при наведении курсора

Это то, что я в настоящее время:Tricky задержки при наведении курсора

$("#cart-summary").mouseenter(function() { 
    $('.flycart').delay(500).slideDown('fast'); 
}); 
$(".flycart").mouseleave(function() { 
    $('.flycart').delay(500).slideUp('fast'); 
}).find('a.close').click(function(){ 
    $(this).parents('.flycart').hide(); 
});

Что это делает:

Если Mouseover # ломовых резюме -> открытый flycart после 500мса

если MouseOut .flycart -> закрыть flycart после 500 мс

Что мне нужно:

Если Mouseover # ломовые резюме для Atleast 500ms -> открытый flycart

если MouseOut .flycart для Atleast 500мс -> близко flycart

Edited добавить: Я также используют hoverIntent, если это может можно использовать здесь?

Большое спасибо!

источник

2009-10-02 3zzy

Вы знаете достаточно о JavaScript, чтобы написать функция, которая определяет, зависала ли мышь o ver элемент для не менее 500 мс? –

Нет, я этого не делаю. Я дизайнер, который также немного разбирается в JS (и смотрит на SO для технической помощи). – 3zzy

Используйте SetTimeout, чтобы проверить, если флаг установить/снять (я использую класс) остается в силе.

$("#cart-summary").mouseenter(function() { 
    $("#cart-summary").addClass("hasFocus"); 
    setTimeout(function(){ 
     if ($("#cart-summary").hasClass("hasFocus")) { 
      $('.flycart').slideDown('fast'); 
     } 
     }, 500); 
     }); 

$("#cart-summary").mouseleave(function() { 
    $("#cart-summary").removeClass("hasFocus"); 
}); 


$(".flycart").mouseenter(function() { 
    $("#cart-summary").removeClass("lostFocus");  
}); 

$(".flycart").mouseleave(function() { 
    $("#cart-summary").addClass("lostFocus"); 
    setTimeout(function(){ 
     if ($("#cart-summary").hasClass("hasFocus")) { 
      $('.flycart').slideUp('fast'); 
      }).find('a.close').click(function(){ 
      $(this).parents('.flycart').hide(); 
     } 
    }, 500) 
});

источник

2009-10-02 16:36:09

Похоже, вам может понадобиться плагин HoverIntent.

Я не знаю, поможет ли это вам с помощью мыши ATLEAST 500ms. Но, возможно, для этого есть вариант.

источник

2009-10-02 16:31:42 slolife

Нашли аналогичный запрос здесь: http://stackoverflow.com/questions/1482029/waiting-x-milliseconds-after-an-event-recheck-and-trigger, но я хочу использовать hoverIntent, если это возможно. – 3zzy

Вы можете использовать hoverIntent плагин следующим образом:

var config = {  
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
    interval: 500, // number = milliseconds for onMouseOver polling interval  
    timeout: 500, // number = milliseconds delay before onMouseOut  
}; 

$(".flycart").hoverIntent(function() { 
     $('.flycart').slideDown('fast'); 
}, function() { 
     $('.flycart').slideUp('fast'); 
}).find('a.close').click(function(){ 
    $(this).parents('.flycart').hide(); 
});

источник

2009-10-02 16:35:19 karim79

Вы можете сделать:

var timeout, 
    $flycart = $(".flycart"), 
    $summary = $("#cart-summary"), 
    delay = 500; 

$summary.mouseenter(function() { 
    if (timeout) window.clearTimeout(timeout); 
    timeout = window.setTimeout(function(){ 
     if ($flycart.is(":visible")) { 
      $flycart.slideDown('fast'); 
     } 
    }, delay); 
}); 
$flycart.mouseleave(function() { 
    if (timeout) window.clearTimeout(timeout); 
    timeout = window.setTimeout(function(){ 
     if ($flycart.is(":visible")) { 
      $flycart.slideUp('fast'); 
     } 
    }, delay); 
})...

источник

2009-10-02 16:44:45

предлагает решение

var mouseenterTimerCart; 
var mouseleaveTimerCart; 

$(document).on({ 
    mouseenter: function() { 
     if (mouseleaveTimerCart) clearTimeout(mouseleaveTimerCart); 
     mouseenterTimerCart = setTimeout(function() { 
      $("#head-cart .cart_items").show() 
     }, 500); 
    }, 
    mouseleave: function() { 
     if (mouseenterTimerCart) clearTimeout(mouseenterTimerCart); 
     mouseleaveTimerCart = setTimeout(function() { 
      $("#head-cart .cart_items").hide() 
     }, 500); 
    } 
}, "#head-cart .full, #head-cart .cart_items");

будет работать, если корзина обновляется динамически

$("#head-cart").html(...crat-html-block...)

источник

2015-02-16 20:23:13 Atmarama

Tricky задержки при наведении курсора

ответ

Смежные вопросы