jquery 悬停优先级和 clearTimeout 问题

Question

所以我正在尝试在我的网站 http://www.beautracare.com/ 上为购物车创建一个下拉菜单，到目前为止，如果我将鼠标悬停在购物车上，您会看到一个下拉菜单淡入，但过了一段时间它会超时并淡出如果您仍然将鼠标悬停在购物车下拉菜单上。我尝试创建一个 setTimeout 并在将鼠标悬停在下拉菜单上时将其清除，但它没有响应。我还尝试在 Jquery 中使用下拉悬停功能，但它似乎并没有触发。请帮忙，谢谢。 jQuery代码如下：

jQuery(document).ready(function() {
    var timer;
    //get all link with class panel
    $('a.panel').click(function () {

                //reset and highlight the clicked link
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');

        //grab the current item, to be used in resize function
        current = $(this);

                //scroll it to the destination
        $('#wrapper').scrollTo($(this).attr('href'), 800);      

                //cancel the link default behavior
        return false;
    });

    $('.wsite-nav-cart').hover(
        function() {
            if ($("#wsite-mini-cart").css("display") == 'none'){
                $("#wsite-mini-cart").fadeIn();
                timer = window.setTimeout(function() {$("#wsite-mini-cart").fadeOut(); }, 1500);
            }
        }, function() {
        }
    );

    $("#wsite-mini-cart").hover(
        function() {
             if (timer) {
                window.clearTimeout(timer);
            } 
            $("#wsite-mini-cart").css({'display':'block','opacity':1});
        }, function() {
            timer = window.setTimeout(function() {$("#wsite-mini-cart").fadeOut(); }, 1500);
        }
    );


    $('.wsite-nav-cart').click(function () {
        if ( $(this).attr("id")){
            $("#wsite-mini-cart").fadeOut();
            $(this).removeAttr('id');
        } else {
            $("#wsite-mini-cart").fadeIn();
            $(this).attr('id', 'active');
        }
        //cancel the link default behavior
        return false;
    });

Answer 1

我做了一点jsfiddle 来展示我将如何解决这个问题。如果您将鼠标悬停在按钮上，则会显示购物车。如果您将鼠标移出按钮，则购物车将隐藏。但是，如果您移到购物车上，它会一直可见，直到您移出为止。

基本上，hideCart 会延迟 500 毫秒。如果任何绑定元素在此期间收到鼠标悬停，它会取消计时器。

代码：

var hideTimer;

function showCart() {
    $("#mini-cart").fadeIn(1000);
    if (hideTimer) {
        window.clearTimeout(hideTimer);
        hideTimer = null;
    }
}

function hideCart() {
    hideTimer = window.setTimeout(function () {
        $("#mini-cart").fadeOut(1000);
    }, 500);
}

$("#nav-cart,#mini-cart").hover(showCart, hideCart);