如何在这段代码上模拟hoverIntent？

Question

我在 上一个主题，但有人说我应该为此打开另一个主题。所以事情是这样的：

我正在为导航后面的功能区设置动画，问题是我想将动画元素保留在前一个位置，而不是返回到起始位置并返回到下一个元素。我能够实现这一目标，但没有使用hoverIntent。所以现在功能区将拾取导航上的每一个动作。我怎样才能防止这种情况发生？

如果我错了，请纠正我，但delay()和setTimeout()此时没有意义，因为无论停止如何，它们都会启动最后一个动画。如果鼠标刚刚经过，如何防止 mouseenter 启动？也许是关于鼠标悬停的 if 子句，例如鼠标是否在悬停块上稳定超过 300 毫秒？

注意：我正在运行一个 noConflict 脚本，因此 j = $。

function rbHover(){


    j("#nav li a")
        .on('mouseenter', function() {

        var l = j(this).parent().position().left;
        var w = j(this).parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

            j("#ribbon").stop('ribbon', true, true).animate({
                "left" : l,
                "width" : w }, {
                    duration: 600,
                    easing: 'swing', 
                    queue: 'ribbon'
                 }).dequeue('ribbon');

            j(".rib-left").stop('rib-left', true, true).animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'linear', 
                    queue: 'rib-left'
                 }).dequeue('rib-left');

            j(".rib-right").stop('rib-right', true, true).animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'linear', 
                    queue: 'rib-right'
                 }).dequeue('rib-right');
        })

        .on('mouseleave', function() {

        var l = j(".active").parent().position().left;
        var w = j(".active").parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

            j("#ribbon").stop('ribbon', true).delay(300, 'ribbon').animate({
                "left" : l,
                "width" : w }, {
                    duration: 600,
                    easing: 'swing', 
                    queue: 'ribbon'
                 }).dequeue('ribbon');

            j(".rib-left").stop('rib-left', true, true).delay(300, 'rib-left').animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'linear', 
                    queue: 'rib-left'
                 }).dequeue('rib-left');

            j(".rib-right").stop('rib-right', true, true).delay(300, 'rib-right').animate({
                "border-right-width": rbw,
                "border-left-width": rbw,
                "border-top-width": rbh,
                "border-bottom-width": rbh,
                "bottom": "-" + (2*rbh) + "px"}, {
                    duration:600,
                    easing: 'linear', 
                    queue: 'rib-right'
                 }).dequeue('rib-right');
        });
}

您可以在以下位置找到我的网站：www.egegorgulu.com

Answer 1

试试这个...

function rbHover(){
    var timeoutID = 0;
    var hoverInterval = 300;

    j("#nav li a")
        .on('mouseenter', function() {
            clearTimeout(timeoutID);
            timeoutID = setTimeout(mouseEnter, hoverInterval, this);
        })
        .on('mouseleave', function() {
            clearTimeout(timeoutID);
            timeoutID = setTimeout(mouseLeave, hoverInterval);
        });

    function mouseEnter(el) {
        var l = j(el).parent().position().left;
        var w = j(el).parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

        j("#ribbon").animate({
            "left" : l,
            "width" : w }, {
            duration: 600,
            easing: 'swing', 
            queue: 'ribbon'
        }).dequeue('ribbon');

        j(".rib-left").stop().animate({
            "border-right-width": rbw,
            "border-left-width": rbw,
            "border-top-width": rbh,
            "border-bottom-width": rbh,
            "bottom": "-" + (2*rbh) + "px"}, {
                duration:600,
                easing: 'linear', 
                queue: 'rib-left'
            }).dequeue('rib-left');

        j(".rib-right").stop().animate({
            "border-right-width": rbw,
            "border-left-width": rbw,
            "border-top-width": rbh,
            "border-bottom-width": rbh,
            "bottom": "-" + (2*rbh) + "px"}, {
                duration:600,
                easing: 'linear', 
                queue: 'rib-right'
            }).dequeue('rib-right');
    }

    function mouseLeave() {
        var l = j(".active").parent().position().left;
        var w = j(".active").parent().width();
        var rbw = Math.round(w/4);
        var rbh = Math.round(w/16);

        j("#ribbon").stop('ribbon', true).animate({
            "left" : l,
            "width" : w }, {
            duration: 600,
            easing: 'swing', 
            queue: 'ribbon'
        }).dequeue('ribbon');

        j(".rib-left").stop('rib-left', true, true).animate({
            "border-right-width": rbw,
            "border-left-width": rbw,
            "border-top-width": rbh,
            "border-bottom-width": rbh,
            "bottom": "-" + (2*rbh) + "px"}, {
                duration:600,
                easing: 'linear', 
                queue: 'rib-left'
            }).dequeue('rib-left');

        j(".rib-right").stop('rib-right', true, true).animate({
            "border-right-width": rbw,
            "border-left-width": rbw,
            "border-top-width": rbh,
            "border-bottom-width": rbh,
            "bottom": "-" + (2*rbh) + "px"}, {
                duration:600,
                easing: 'linear', 
                queue: 'rib-right'
            }).dequeue('rib-right');
    }
}

我刚刚向 mouseenter 事件添加了一个间隔，以便它在触发之前等待 - 更改hoverInterval 以适应。