Question

I am working on a site in which there are a series of elements, and only one of them must be active at any time. When that element is active, a ‘Details’ div is shown.

These elements become active when you hover on them, but as I said, only one of them can be active at the same time. I am currently setting the active element with an active class.

In my current code, this is what happens when a user hovers on any of the elements:

• The previous active element gets the class ‘active’ removed , and is fadeOut
• On the fadeOut callback, the hovered element becomes active (gets the class ‘active’), and is fadeIn
• If there is no current active element, the hovered element becomes active (class ‘active’) and is fadeIn

This works out OK, but when you hover very quickly between elements, there is a brief moment where no element is active, so more than element gets the active class and is shown.

How would you approach this problem?

Here is my code:

function setActive(selected) {


    //stores the active element in a variable
    active = selected;

    //checks if there are currently elements with the 'active' class in the DOM
    if ( $('#info article.active').length > 0) {

        //if there is any currently active element, and its element_id attribute is not the one stored in the active variable
        //it gets the 'active' class removed, its hidden, and in the callback of the animation
        //the newly selected element gets the class 'active' and is shown with fadeIn

        $('#info article.active[element_id!="' + selected + '"]').removeClass('active').fadeOut('fast', function(){
            $('#info article[element_id="' + selected +'"]').addClass('active').fadeIn('normal');
            }); 

    } else {

        //if there is no current active element, the newly selected one is applied the class active, and shown with fadeIn

        $('#info article[element_id="' + selected +'"]').addClass('active').fadeIn('normal');
    }
}

Answer 1

Stray (mis)firings on mouse flyovers, and/or finicky targets is a common problem. The standard solution is to have a small delay before a hover “sticks”.

Important: The question did not show how setActive() was being called!

But if you structure the HTML something like this:

<div id="flyOverControls">
    <ul>
        <li rel="Article_1">Show 111</li>
        <li rel="Article_2">Show 222</li>
        <li rel="Article_3">Show 333</li>
        <li rel="Article_4">Show 444</li>
    </ul>
</div>
<div id="info">
    <article id="Article_1">First article.</article>
    <article id="Article_2">Second article.</article>
    <article id="Article_3">Third article.</article>
    <article id="Article_4">Fourth article.</article>
</div>

Then activate the controls like this:

$("#flyOverControls li").hover (function (zEvent) {setActiveArticle (zEvent); } );

Then this code should do the trick. Adjust speeds to taste. Personally, I’d kill that fade-out.

function setActiveArticle (zEvent)
{
    var dDelay;
    var ActionFunction  = null;
    var targetID        = $(zEvent.currentTarget).attr ('rel');

    if (zEvent.type == 'mouseenter')
    {
        //--- Hovering over a new article control... Pause for an ergo delay.
        dDelay          = 300;
        ActionFunction  = function (targetID, context) {
            //--- If we are setting the same article, then nothing needs be done here.
            if ( ! (context.lastArticle  &&  context.lastArticle == targetID) ) {
                //checks if there are currently elements with the 'active' class in the DOM
                if ( $('#info article.active').length > 0) {

                    /*  If there is any currently active element, and its element_id attribute is not the one stored in the
                        active variable it gets the 'active' class removed, it's hidden, and in the callback of the animation
                        the newly selected element gets the class 'active' and is shown with fadeIn.
                    */
                    $('#info article.active').removeClass ('active').fadeOut ('fast', function () {
                        $('#info article#' + targetID).addClass ('active').fadeIn ('normal');
                    } );

                } else {
                    //if there is no current active element, the newly selected one is applied the class active, and shown with fadeIn

                    $('#info article#' + targetID).addClass ('active').fadeIn ('normal');
                }
                context.lastArticle = targetID;
            }
        };
    }
    else //-- zEvent.type == 'mouseleave'
    {
        //--- Done hovering, no action is needed, other than to wait, in case of user jitter.
        dDelay          = 200;
        ActionFunction  = function (targetID, context) {
            var noOp    = 0;
        };
    }

    if (typeof this.delayTimer == "number")
    {
        clearTimeout (this.delayTimer);
    }
    context             = this;
    this.delayTimer     = setTimeout (function() { ActionFunction (targetID, context); }, dDelay);
}

See it in action at jsFiddle.