Question

I’ve got a page full of articles, with margins between them, wrapped in a <div id="shell"> and am trying to create an effect where if you hover over an article all the others fade out. That’s fairly simple to do but when you move from one article to another everything else fades in and out again. Instead of letting all the articles fade back in by leaving the #shell I want them to only fade back when the mouse has been in the shell but not on an article for 500ms as the shell takes up the entire window.

$('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);
};

That’s what I have so far but I don’t think the timeout is working.. It occasionally works but mostly fades the rest back in then out again. Am I going about this completely the wrong way or is there just a glitch in my code? If you have any ideas or simpler solutions I’d love some feedback.

Follow my feeble progress here

Answer 1

Have you tried something like:

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