Question

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

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?

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?

Note: I’m running a noConflict script, hence 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');
        });
}

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

Answer 1

Try this…

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');
    }
}

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