如何消除 jQuery .hover() 方法中的延迟答案

【问题标题】：How to remove the delay in jQuery .hover() method如何消除 jQuery .hover() 方法中的延迟
【发布时间】：2015-02-27 18:07:36
【问题描述】：

我试图让导航元素随着文档滚动而改变颜色，我还想让悬停状态动态改变颜色。但是有一个延迟，我必须等待几秒钟才能悬停并更改颜色。我可以消除延迟吗？或者更好的是，当我悬停在菜单上时，我可以通过滚动来改变悬停的颜色吗？我觉得我很接近解决方案但我找不到它。

这里是 jQuery 代码：

$(document).ready(function () {
    $(document).scroll(function () {
        var h = $(window).scrollTop() / $(document).height() * 360;
        if (h <= 180) {
            hhover = h + 180;
        } else {
            hhover = h - 180;
        }
        $("a").css({
            "color":"hsl(" + h + ",100%,50%)","transition":"0.2s ease"});
        $("a").hover(
        function () {
            $(this).css(
                "color", "hsl(" + hhover + ",100%,50%)");
        },
        function () {
            $(this).css(
                "color", "hsl(" + h + ",100%,50%)");
        });
    });
});

请在下面找到我的 jsFiddle： https://jsfiddle.net/dtZDZ/1036/

谢谢！

【问题讨论】：

对不具体的问题感到抱歉。你可以忘记第二个问题。即使我删除了 .2s 过渡，在我完成滚动之间仍然存在延迟。这是更新的 jsFiddle：jsfiddle.net/dtZDZ/1038
在hover 回调中设置样式时尝试删除"transition":"0.2s ease"
从 nav-links a:hover CSS 规则中移除过渡 -> jsfiddle.net/lshettyl/dtZDZ/1040

标签： javascript jquery css hover delay

【解决方案1】：

在您的 CSS 代码中：

.nav-links a:hover {
    color: hsl(180,100%,50%);
    transition: ease;
}

【讨论】：

我已经更新了我的小提琴，但即使在删除 .2s 过渡之后仍然存在延迟。这是链接：jsfiddle.net/dtZDZ/1039
这是一个简短的视频，展示了我的 jsFiddle 结果：tinypic.com/r/346me85/8

【解决方案2】：

从 javascript 代码和样式中删除所有 CSS 过渡定义。

【讨论】：

当我将鼠标悬停在链接上时，我看不到延迟。颜色变化非常快
这是一个简短的视频，展示了我的 jsFiddle 结果：tinypic.com/r/346me85/8