javascript - 在悬停和动画回调上设置事件元素的 jQuery 脚本问题

Question

我在一个网站上工作，其中有一系列元素，并且只有其中一个元素必须在任何时候处于事件状态。当该元素处于事件状态时，将显示“详细信息”div。

当您将鼠标悬停在这些元素上时，这些元素会变为事件状态，但正如我所说，它们中只有一个可以同时处于事件状态。我目前正在使用事件类设置事件元素。

在我当前的代码中，这是当用户将鼠标悬停在任何元素上时发生的情况:

• 先前的事件元素移除类“事件”，并淡出
• 在 fadeOut 回调中，悬停的元素变为事件状态(获取类“active”)，并且淡入
• 如果没有当前事件元素，则悬停元素变为事件元素(类'active')并淡入

这没问题，但是当您在元素之间快速悬停时，有一个短暂的时刻没有元素处于事件状态，因此不仅仅是元素获得事件类并显示。

你会如何解决这个问题？

这是我的代码:

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

在鼠标悬停和/或挑剔的目标上发生杂散(错误)射击是一个常见问题。标准解决方案是在悬停“粘住”之前有一个小的延迟。

重要提示:问题没有说明 setActive() 是如何被调用的!

但是如果你像这样构造 HTML:

<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>

然后像这样激活控件:

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

那么这段代码应该可以解决问题。根据口味调整速度。就个人而言，我会取消淡出。

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.