Question

鼠标移出时，

在鼠标移动到其中一个列表元素时会延迟，并在关闭菜单之前等待一段时间。还有一个叠加元素被添加到背景中。如果我移动到另一个LI，则dimm仍然存在。当鼠标移动到li元素时，dimm将消失。除此之外，叠加层会在浏览器调整大小时更改大小。

我的问题是有时候不会出现叠加暗淡。当我快速移动鼠标和元素时，它就是这样。

这是我的代码。也许有人有想法优化它？提前谢谢。

.overlay{
    background: #2b343a;
    position: fixed;
}
.topNav{    
    list-style: none;
    margin: 0;
    padding: 30px 0 0;
    li{
        float: left;
        margin-left: 33px;
        position: relative;
    }
    a{
        font-size: 24/16em;
    }
    div{
        background: red;
        display: none;
        left: 0;
        position: absolute;
        top: 20px;
        z-index: 1000;
    }
}

<ul class="topNav">
                <li><a class="item" href="http://google.com">text 1</a><div>dummy text <br /> test</div>    
                </li>
                <li><a class="item" href="http://google.com">text 2</a><div>dummy text <br /> test</div>    
                </li>
                <li><a class="item" href="http://google.com">text 3</a><div>dummy text <br /> test</div>    
                </li>
                <li><a class="item" href="http://google.com">text 4</a><div>dummy text <br /> test</div>    
                </li>
                <li><a class="item" href="http://google.com">text 5</a><div>dummy text <br /> test</div>    
                </li>
            </ul>

(function ($) { //Anonomous namespace

    $(function () { //jQuery Document Ready

//Topmenu START -------------------------
        var topmenuTimer;
        $('.topNav li').hover(function() {
            var subMenu = $(this).find("div");
            $('.topNav div').not(subMenu).fadeOut(100);
            subMenu.delay(500).slideDown(100, 'easeInOutCubic');
            if($('.overlay').length === 0){
                $('.top').after('<div class="overlay"></div>').fadeIn();
                overlay();
            }           
            clearTimeout(topmenuTimer);
        }, function() {
            var subMenu = $(this).find("div");
            topmenuTimer = setTimeout(function() {
                subMenu.stop(true, true).slideUp(100, 'easeInOutCubic');
                $('.overlay').fadeOut(600, function() { $(this).remove(); });
            }, 1000);
        });

        function overlay(){
            var overlayHeight = $('html').height();
            var overlayWidth = $('html').width();
            $('.overlay').css({
                'width': overlayWidth,
                'height': overlayHeight
            });
        }
        $.event.add(window, "resize", overlay);

//Topmenu END -------------------------


    });


    //****************************************************************************************************************
    //Functions
    //****************************************************************************************************************
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
    easeInOutCubic: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    }
});


})(jQuery);

jquery悬停菜单延迟和dimm

0 个答案: