Jquery 在悬停时淡出所有其他 elms，直到鼠标离开所有 elms 一段时间后才淡入

Question

我有一整页的article s，它们之间有边距，包裹在 <div id="shell"> 中我正在尝试创建一种效果，如果您将鼠标悬停在一篇文章上，所有其他文章都会淡出。这很简单，但是当您从一篇文章转到另一篇文章时，其他所有内容都会再次淡入淡出。不要通过留下 #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);
};

这就是我到目前为止所拥有的，但我认为超时不起作用。它偶尔会起作用，但大多数情况下会将其余部分淡入然后再次淡出。我是否以完全错误的方式处理这个问题，或者只是我的代码中有一个小故障？如果您有任何想法或更简单的解决方案，我希望得到一些反馈。

跟随我微弱的进步here

Answer 1

您是否尝试过类似的操作:

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