How to remove the delay in jQuery .hover() method

Question

I tried to make my nav element change color as the document scrolls, I also want to make the hover state change color dynamically. But there's a delay, I have to wait for a fraction of seconds before I can hover and change the color. Can I remove the delay? Or better, when I am hovering on a menu, can I make the hovered color change by scrolling? I feel like I'm so close to the solution yet I can't find it.

Here are the jQuery codes:

$(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%)");
        });
    });
});

Please find my jsFiddle below: https://jsfiddle.net/dtZDZ/1036/

Thank you!

Answer 1

In your CSS code:

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

Answer 2

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