Problem with a jQuery script that sets an active element on hover and animation callbacks
<p>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.</p>

<p>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.</p>

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

<ul>
<li>The previous active element gets the class 'active' removed , and is fadeOut</li>
<li>On the fadeOut callback, the hovered element becomes active (gets the class 'active'), and is fadeIn</li>
<li>If there is no current active element, the hovered element becomes active (class 'active') and is fadeIn</li>
</ul>

<p>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.</p>

<p>How would you approach this problem?</p>

<p>Here is my code:</p>

<pre><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 &gt; 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');
    }
}
</code></pre>
