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

jquery悬停优先级和clearTimeout问题

1 个答案: