Question

我有一个菜单项列表，它们使用悬停事件来显示动态区域。问题在于，当用户移动单个菜单项时，每个菜单项都会触发toggle（）事件，导致大量的显示/隐藏事件在您到达所需的实际菜单元素之前被触发。

    jQuery(".categoryPopupLink").hover(
            function () {
                    var str = jQuery(this).attr('id');
                    var id  = str.substring(str.indexOf("_") + 1);

                    jQuery (".categoryPopup:visible").toggle (750);

                    jQuery ("#categoryPopup_" + id).toggle (750);
                    return false;
            }
    );

如何修改此代码，以便只有当鼠标停留在菜单元素上一段特定的持续时间（例如，0.5秒）时才会触发toggle（）事件。

Answer 1

试试这个......

var timeoutID = 0;

jQuery(".categoryPopupLink")
    .on("mouseenter", function () {
        var str = this.id;
        var id  = str.substring(str.indexOf("_") + 1);
        clearTimeout(timeoutID);
        setTimeout(function() {
            jQuery(".categoryPopup:visible").hide();
            jQuery("#categoryPopup_" + id).show();
        }, 500);
    })
    .on("mouseleave", function() {
        clearTimeout(timeoutID);
        jQuery(".categoryPopup:visible").hide();
    });

在显示元素之前应暂停500ms。

Jquery：阻止质量悬停事件直到鼠标在元素中持续0.5秒

1 个答案: