鼠标hover时棘手的延迟

这就是我目前所拥有的：

$("#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(); }); 

它的作用是：

如果鼠标hover＃cart-summary – > 500ms后打开flycart

如果mouseout .flycart – > 500ms后关闭flycart

我需要的是：

如果鼠标hover＃cart-summary为ATLEAST 500ms – >打开flycart

如果mouseout .flycart为ATLEAST 500ms – >关闭flycart

编辑添加：我也使用hoverIntent，如果可以在这里使用？

非常感谢！

Answer 1

使用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) }); 

Answer 2

听起来你可能需要HoverIntent插件。

我不知道它是否会帮助您使用ATLEAST 500ms鼠标。 但也许那里有一个选择。

Answer 3

您可以使用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(); }); 

Answer 4

你可以这样做：

 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); })... 

Answer 5

提供解决方案

 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...)