Jquery淡出hover、don'上的所有其他榆树；在一段时间内，鼠标从所有榆树上移开之前，不要将其淡入淡出

我有一个满页的

文章

s，它们之间有空白，用

包装，我试图创造一种效果，如果你把鼠标悬停在一篇文章上，所有其他的都会淡出。这很容易做到，但当你从一篇文章转到另一篇文章时，其他的一切都会再次淡入淡出。不要让所有的文章通过离开

#shell

而淡入，我希望它们只在鼠标进入shell时淡入，而不是在一篇文章上500毫秒，因为shell占据了整个窗口

$('article').hover(function() {
    if ($('body').hasClass('hover')) {
        $(this).fadeTo(100,1);
    }
    else {
        $('body').addClass('hover');
        $('article').not(this).fadeTo(300, 0.6);
    }
}, function() {
    $(this).fadeTo(300,0.6);
    checkandfade();
});

function checkandfade() {
    setTimeout(function() {
        $(document).mousemove(function(e){
            if (e.target.id == 'shell' && $('body').hasClass('hover')){
                $('article').stop(true,true).fadeTo(100, 1);
                $('body').removeClass('hover');
            }
        });
    },500);
};

到目前为止，这就是我所知道的，但我认为超时不起作用。。它偶尔会起作用，但大多数情况下会将其余部分淡入淡出。我是完全错了呢，还是我的代码中有一个小故障？如果您有任何想法或更简单的解决方案，我希望得到一些反馈

---

跟随我微弱的进步

我过去也曾使用hoverIntent插件做过类似的事情（尽管是在菜单上）。这使您可以设置mouseenter和mouseleave函数，还可以指定一个超时，以确定触发它们的确切时间。您还可以将其与布尔变量检查相结合，即在超时后，在mouseenter上将某个值设置为true，在mouseleave上将该值设置为false（实际上将其延迟到以后）。然后，您可以在不同的事件函数中检查此bool，以决定是否要执行某项操作

---

您是否尝试过以下方法：

var timeout = 0;
$('article').hover(function() {
    $(this).stop(true, true).addClass('artHovered').fadeTo(100,1);
    fadeOutArticles();
}, function() {
    $(this).removeClass('artHovered');
    fadeOutArticles();
});
function fadeOutArticles(){
    clearTimeout(timeout);
    $('article').not('.artHovered').fadeTo(300,0.6, function(){
        timeout = setTimeout(function(){
            if($('article.artHovered').length==0){
                $('article').stop(true,true).fadeTo(100, 1);
            }
        }, 500);
    });     
}

---

我已经更新了代码，我想这就是您试图实现的目标：）