如何在此代码块上模拟hoverIntent?

问题描述

我在，但是有人说我应该为此另开一个.这样就可以了:

I have asked the same in a previous topic but someone said that I should open another for this. So here it goes:

我正在为导航后面的功能区设置动画，问题是我想将动画元素保留在前一个位置，而不是返回到起始位置并返回到下一个元素.我能够实现这一点，但是没有使用hoverIntent.因此，现在功能区将拾取导航上的每一个动作.我该如何预防呢?

I'm animating a ribbon behind the navigation and the problem is that I want to keep the animated element in the previous place instead of going back to the starting position and coming back to the next element. I was able to achieve this, but without the use of hoverIntent. So now the ribbon will pick up every single movement on the navigation. How can I prevent this?

如果我错了，请纠正我，但是delay()和setTimeout()在这一点上没有意义，因为无论停止什么位置，它们都会触发最后一个动画.如果鼠标经过时，如何防止mouseenter启动?可能是关于鼠标悬停的if子句，例如，如果鼠标在悬停块上稳定超过300毫秒?

Correct me if I'm wrong but delay() and setTimeout() did not make sense at this point since they would fire up the last animation regardless of the stops. How can I prevent the mouseenter from firing up if the mouse is just passing by? Maybe an if clause on mouseover like if mouse is stable on the hovering block for more than 300 ms?

注意:我正在运行一个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

You can find my website at: www.egegorgulu.com

推荐答案

尝试一下...

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以使其适合.

I've just added an interval to the mouseenter event so it waits before firing - change hoverInterval to suit.

这篇关于如何在此代码块上模拟hoverIntent?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！