Question

我在previous topic中问了同样的问题，但是有人说我应该为此开另一个。所以这就是：

我正在制作导航背后的功能区，问题是我想将动画元素保留在前一个位置，而不是返回到起始位置并返回到下一个元素。我能够实现这一点，但没有使用hoverIntent。所以现在功能区将拾取导航上的每一个动作。我怎么能阻止这个？

如果我错了，请纠正我但延迟（）和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以适应。

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

1 个答案: